/* ============================================================================
   DESIGN TOKENS
   Calytics palette (calytics-operational/assets/demo-pages) expressed through a
   Material-3 system: tonal elevation instead of borders, state layers instead of
   hover colours, a 4pt spacing scale, and a real type scale.

   Migration: these become Tailwind theme extensions in calytics-fe. NOTHING here
   is hard-coded in a component — every component reads a token.
   ========================================================================= */
:root {
  /* ---- brand -------------------------------------------------------- */
  --indigo:#070D76; --indigo-deep:#03051F;
  --lavender:#6B63B8; --lavender-light:#9B92E6;

  /* ---- surfaces -----------------------------------------------------
     M3 tonal elevation: a raised surface is the brand hue mixed into white,
     not a white box with a border. Fewer lines, clearer hierarchy.        */
  --paper:#F7F7FB;
  --surface:#FFFFFF;
  --surface-1:color-mix(in srgb, var(--indigo) 3%, #FFFFFF);
  --surface-2:color-mix(in srgb, var(--indigo) 5%, #FFFFFF);
  --surface-3:color-mix(in srgb, var(--indigo) 8%, #FFFFFF);

  /* ---- text ---------------------------------------------------------- */
  --ink:#12131C; --ink-2:#5B6070; --ink-3:#8A90A2;

  /* ---- outlines — used sparingly; elevation carries most separation --- */
  --rule:color-mix(in srgb, var(--indigo) 14%, transparent);
  --rule-2:color-mix(in srgb, var(--indigo) 7%, transparent);

  /* ---- accent -------------------------------------------------------- */
  --accent:var(--indigo);
  --accent-soft:color-mix(in srgb, var(--indigo) 8%, transparent);
  --accent-ink:#FFFFFF;

  /* ---- semantic — never the accent ----------------------------------- */
  --good:#0F6E4F;  --good-soft:color-mix(in srgb, #10B981 14%, transparent);
  --warn:#9A5B00;  --warn-soft:color-mix(in srgb, #F59E0B 16%, transparent);
  --bad:#B3261E;   --bad-soft:color-mix(in srgb, #EF4444 12%, transparent);

  /* ---- state layers -------------------------------------------------
     M3 interaction is an opacity layer over the component, not a different
     colour. One rule, every surface, light and dark alike.                */
  --state-hover:.06; --state-focus:.10; --state-press:.12;
  --state-ink:var(--indigo);

  /* ---- elevation — soft, two-part, barely there ---------------------- */
  --e0:none;
  --e1:0 1px 2px rgba(7,13,118,.06), 0 1px 3px 1px rgba(7,13,118,.05);
  --e2:0 1px 2px rgba(7,13,118,.07), 0 2px 6px 2px rgba(7,13,118,.06);
  --e3:0 4px 8px 3px rgba(7,13,118,.07), 0 1px 3px rgba(7,13,118,.09);
  --e4:0 6px 10px 4px rgba(7,13,118,.08), 0 2px 3px rgba(7,13,118,.10);
  --shadow:var(--e1); --shadow-lg:var(--e3);

  /* ---- shape — M3 scale ---------------------------------------------- */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:28px; --r-pill:999px;

  /* ---- spacing — 4pt ------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---- type ---------------------------------------------------------- */
  --font-display:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  /* headline / title / body / label — sizes AND their line-heights */
  --t-headline:28px;  --t-headline-lh:36px;
  --t-title-lg:20px;  --t-title-lg-lh:28px;
  --t-title:15px;     --t-title-lh:22px;
  --t-body:13.5px;    --t-body-lh:20px;
  --t-label:12px;     --t-label-lh:16px;
  --t-label-sm:10.5px;--t-label-sm-lh:14px;
}

/* ---- dark: the same system, re-toned ----------------------------------
   Elevation in dark is a LIGHTER surface, not a bigger shadow — a shadow on a
   dark ground is invisible, so tone has to do the work.                     */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A0C16;
    --surface:#13162A;
    --surface-1:#181C32;
    --surface-2:#1E223B;
    --surface-3:#252A46;
    --ink:#F2F4F9; --ink-2:#C3C9D8; --ink-3:#8F97AC;
    --rule:rgba(255,255,255,.12); --rule-2:rgba(255,255,255,.06);
    --accent:#A9B4F0; --accent-soft:rgba(169,180,240,.14); --accent-ink:#0A0C16;
    --good:#5FD3A6;  --good-soft:rgba(16,185,129,.16);
    --warn:#F0B356;  --warn-soft:rgba(245,158,11,.16);
    --bad:#F2938C;   --bad-soft:rgba(239,68,68,.16);
    --state-ink:#FFFFFF; --state-hover:.07; --state-focus:.11; --state-press:.14;
    --e1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.25);
    --e2:0 1px 2px rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.3);
    --e3:0 4px 8px 3px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5);
    --e4:0 6px 10px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#0A0C16;
  --surface:#13162A;
  --surface-1:#181C32;
  --surface-2:#1E223B;
  --surface-3:#252A46;
  --ink:#F2F4F9; --ink-2:#C3C9D8; --ink-3:#8F97AC;
  --rule:rgba(255,255,255,.12); --rule-2:rgba(255,255,255,.06);
  --accent:#A9B4F0; --accent-soft:rgba(169,180,240,.14); --accent-ink:#0A0C16;
  --good:#5FD3A6;  --good-soft:rgba(16,185,129,.16);
  --warn:#F0B356;  --warn-soft:rgba(245,158,11,.16);
  --bad:#F2938C;   --bad-soft:rgba(239,68,68,.16);
  --state-ink:#FFFFFF; --state-hover:.07; --state-focus:.11; --state-press:.14;
  --e1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.25);
  --e2:0 1px 2px rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.3);
  --e3:0 4px 8px 3px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5);
  --e4:0 6px 10px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.55);
}