/* ==========================================================================
   Auralata — design tokens v1.0
   Source of truth. tokens.json, tokens.php and email.json are generated
   from this file; never edit those by hand.
   ========================================================================== */
:root{
  /* --- neutrals (cool, never pure black) --- */
  --ink-900:#101619;
  --ink-700:#27333A;
  --ink-600:#435059;
  --ink-500:#626E78;
  --ink-400:#96A3AB;
  --ink-300:#C2CCD1;
  --paper:#FFFFFF;
  --mist:#F5F8F8;
  --mist-2:#E9F0F0;
  --line:#E2E9E9;
  --line-2:#CEDADA;

  /* --- brand --- */
  --aura:#0E8C7C;          /* primary accent — teal */
  --aura-600:#0A6F63;
  --aura-soft:#E2F3F0;
  --marine:#1F5FD1;        /* automation, AI output, links */
  --marine-soft:#E7EEFC;

  /* --- semantic --- */
  --mint:#177F42;  --mint-soft:#E3F3E9;   /* success */
  --amber:#8C6212; --amber-soft:#FAF0DB;  /* attention */
  --rose:#B3261E;  --rose-soft:#FAE8E6;   /* error state only, never brand */
  --azure:#1F5FD1; --azure-soft:#E7EEFC;  /* info */

  /* --- data visualisation: blue 700/500/300, teal 700/500/300 --- */
  --viz-1:#1F5FD1; --viz-2:#0E8C7C; --viz-3:#5B8FE8;
  --viz-4:#45B3A3; --viz-5:#9CBCF2; --viz-6:#8FD3C9;

  /* --- gradients: always within blue–teal, always two stops --- */
  --grad-aura:linear-gradient(135deg,#0E8C7C 0%,#1F5FD1 100%);
  --grad-deep:linear-gradient(120deg,#101619 0%,#13262B 55%,#0C3B37 100%);
  --grad-dawn:linear-gradient(135deg,#8FD3C9 0%,#9CBCF2 100%);
  --grad-mist:linear-gradient(180deg,#F5F8F8 0%,#E9F0F0 100%);
  --grad-glow:radial-gradient(120% 120% at 18% 0%,rgba(14,140,124,.28),rgba(14,140,124,0) 62%);
  --grad-fill:linear-gradient(180deg,rgba(14,140,124,.35) 0%,rgba(14,140,124,0) 100%);

  /* --- semantic surfaces (what components use) --- */
  --bg:var(--mist);
  --surface:var(--paper);
  --surface-2:var(--mist);
  --text:var(--ink-900);
  --text-2:var(--ink-600);
  --text-3:var(--ink-500);
  --border:var(--line);
  --border-2:var(--line-2);

  /* --- radius --- */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  /* --- spacing, 4px base --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* --- elevation: borders first, shadow only when floating --- */
  --e-1:0 1px 2px rgba(16,22,25,.06);
  --e-2:0 4px 14px rgba(16,22,25,.09);
  --e-3:0 16px 40px rgba(16,22,25,.16);

  /* --- layering --- */
  --z-base:0; --z-sticky:10; --z-bar:20; --z-pop:30; --z-modal:40; --z-toast:50; --z-tip:60;
  --focus:2px solid #0E8C7C;

  /* --- motion --- */
  --t-micro:110ms cubic-bezier(.2,0,.2,1);
  --t-base:180ms cubic-bezier(.2,0,.2,1);
  --t-enter:240ms cubic-bezier(.16,1,.3,1);

  /* --- type --- */
  --font-display:"Instrument Sans","Inter",system-ui,sans-serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- brand constants: never flip with the theme --- */
  --brand-ink:#101619;
  --brand-aura:#0E8C7C;
}

:root[data-theme="dark"]{
  --ink-900:#EFF3F4; --ink-700:#D9E0E2; --ink-600:#B2BEC3;
  --ink-500:#8A969C; --ink-400:#69757C; --ink-300:#48545A;
  --paper:#141A1D;
  --mist:#0B1013; --mist-2:#1A2226;
  --line:#232C30; --line-2:#323D43;
  --aura:#3FBFAC; --aura-600:#5FD0BE; --aura-soft:#0D2B28;
  --marine:#6E9BF5; --marine-soft:#101C33;
  --mint:#3FBF71; --mint-soft:#0F2819;
  --amber:#D9A43C; --amber-soft:#2A2110;
  --rose:#E8705F; --rose-soft:#2C1715;
  --azure:#6E9BF5; --azure-soft:#101C33;
  --viz-1:#6E9BF5; --viz-2:#3FBFAC; --viz-3:#A7C4FA;
  --viz-4:#79D4C6; --viz-5:#D2E0FB; --viz-6:#B6E6DD;
  --grad-aura:linear-gradient(135deg,#0E7F71 0%,#1B4FAE 100%);
  --grad-deep:linear-gradient(120deg,#0B1013 0%,#122227 55%,#0B3430 100%);
  --grad-dawn:linear-gradient(135deg,#17403B 0%,#16294A 100%);
  --grad-mist:linear-gradient(180deg,#141A1D 0%,#1A2226 100%);
  --grad-glow:radial-gradient(120% 120% at 18% 0%,rgba(63,191,172,.22),rgba(63,191,172,0) 62%);
  --grad-fill:linear-gradient(180deg,rgba(63,191,172,.3) 0%,rgba(63,191,172,0) 100%);
  --e-1:0 1px 2px rgba(0,0,0,.4);
  --e-2:0 4px 14px rgba(0,0,0,.45);
  --e-3:0 16px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark; }
}