/* ============================================================
   Echopad Unified Color System — single source of truth.
   Values copied from the "Echopad Palette" design doc
   (design-tokens.css) and the v2 pages built on it.
   Consume the ROLE tokens in components; never hardcode a hex.
   ============================================================ */
:root {
  /* ---------- Neutrals (cool slate) ---------- */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* ---------- Semantic status ----------
     THE THREE-ROLE SPLIT. Every status hue carries three tokens; pick by the job
     the colour has to do, never by which one looks right:
       --color-X         GRAPHIC — icons, dots, bars, rules, on white/card grounds.
                         Never text. 3:1 floor.
       --color-X-solid   TEXT-BEARING FILL — buttons, counter bubbles. Always paired
                         with --on-X-solid for the label. 4.5:1 floor.
       --color-X-strong  TEXT ON THE TINT (--color-X-bg), and any glyph on that tint
                         whose graphic value doesn't clear 3:1 there (amber doesn't).
                         Flips to a light value in dark mode. 4.5:1 floor.
     -solid exists where the system actually fills a shape (error, warning); add the
     success twin the day a filled success ground appears — don't pre-invent it.
     Every pair's measured ratio, both themes, is published on Colors → Contrast. */
  --color-success: #16a34a;        /* GRAPHIC green — 3.3:1 on white */
  --color-success-bg: #dcfce7;
  --color-success-strong: #15803d; /* TEXT green — 4.6:1 on the tint, 4.8:1 on --surface-sunken */
  --color-warning: #d97706;        /* GRAPHIC amber — 3.2:1 on white; only 2.9:1 on its own tint, so on the tint use -strong */
  --color-warning-bg: #fef3c7;
  --color-warning-strong: #92400e; /* TEXT amber — 6.4:1 on the tint */
  --color-warning-solid: #92400e;  /* TEXT-BEARING amber fill — --on-warning-solid on it is 7.1:1 */
  --color-warning-solid-hover: #7c2d12;
  --on-warning-solid: #ffffff;
  --color-error: #e05252;          /* GRAPHIC red — icons, glyphs, non-text marks only (3.8:1 on white) */
  --color-error-solid: #c94040;    /* TEXT-BEARING red — filled bubbles/buttons */
  --on-error-solid: #ffffff;       /* label on --color-error-solid — 4.9:1 */
  --color-error-strong: #a03f37;   /* text on the soft tint — 5.9:1 on #fef2f2 (#fecaca is a border, not a text ground) */
  --color-error-bg: #fef2f2;
  --color-error-soft: #fef2f2;     /* banner / callout ground */
  --color-error-soft-border: #fecaca;
  --color-info: #2563eb;
  --color-info-bg: #dbeafe;        /* text on it: --on-tint, 7.2:1 */

  /* ---------- Page ground + section bands ----------
     --page-bg is the tinted ground the sticky nav sits on (it bleeds ~40px below
     the nav behind a mask, then stops). Content sections do NOT use it: they
     alternate two opaque bands, --band-a and --band-b, so section boundaries
     read as a quiet rhythm rather than one long wash. */
  --page-bg: radial-gradient(1100px 700px at 88% 0%, rgba(8,145,178,.22), transparent 62%), radial-gradient(900px 620px at 0% 58%, rgba(15,118,110,.15), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); /* @kind color */
  --band-a: #ffffff; /* @kind color */  /* hero, products, CTA */
  --band-b: #f8fafc; /* @kind color */  /* suite, platform, proof */
  --footer-bg: #020617; /* @kind color */

  /* ---------- Surfaces & text (role-based, theme-aware) ---------- */
  --surface-page: var(--color-neutral-50);
  --surface-card: var(--color-neutral-0);
  --surface-raised: var(--color-neutral-0);
  --surface-sunken: var(--color-neutral-100);
  --surface-inverse: var(--color-neutral-900);

  --text-primary: var(--color-neutral-900);   /* 17.9:1 on white */
  --text-secondary: var(--color-neutral-600); /*  7.6:1 on white */
  --text-muted: #5c6b80;                      /*  5.4:1 on card, 5.0:1 on --surface-sunken.
                                                 Not neutral-500 (#64748b): that only reached
                                                 4.3:1 on sunken and failed AA there. */
  --text-disabled: var(--color-neutral-400);  /* disabled / non-text only */
  --text-inverse: var(--color-neutral-0);

  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);

  /* ---------- BRAND GRADIENT (identity moments ONLY: primary CTA,
     app icons, banners, product tiles — never everyday controls).
     One gradient across the whole suite; products are differentiated
     by icon/imagery, not by color. ---------- */
  --brand-from: #3b82f6;
  --brand-mid: #0891b2;
  --brand-to: #0f766e;
  --gradient-brand: linear-gradient(135deg, var(--brand-from), var(--brand-mid), var(--brand-to));
  /* TEXT-BEARING twin of the identity gradient — same three hues, one step darker,
     so --on-gradient clears AA at any label size (5.4:1 at its lightest stop; the
     graphic ramp above is 3.68:1 there, AA-large only). Use it under any label
     smaller than 19px; --gradient-brand keeps the identity moments. */
  --gradient-brand-solid: linear-gradient(135deg, #1d4ed8, #0e7490, #115e59); /* @kind color */
  /* Same ramp, used as a TEXT fill for the hero phrase and headline figures.
     Lightens in dark mode so it stays legible on the slate ground. */
  --gradient-display: linear-gradient(135deg, #3b82f6 0%, #0891b2 55%, #0f766e 100%); /* @kind color */
  --on-gradient: #ffffff;

  /* Logo palette — the mark is teal; only the logo uses these. */
  --logo-teal: #14b8a6;
  --logo-teal-deep: #0d9488;
  --logo-node: #0ea5e9;
  --logo-node-ring: #0284c7;

  /* ---------- INTERACTIVE ACCENT — one accent everywhere.
     Buttons, links, focus rings, active nav, selected rows. AA on white. */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-tint: #dbeafe;
  --tint-border: #bfdbfe;   /* border for accent-tint chips/badges */
  --on-tint: #1e40af;       /* text on accent-tint — 8.6:1 */
  --on-accent: #ffffff;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); /* @kind shadow */

  /* Role chips (dashboard) — permission level is the only per-role color */
  --role-super-admin-bg: #f3e8ff;
  --role-super-admin-fg: #7e22ce;
  --role-client-admin-bg: #dbeafe;
  --role-client-admin-fg: #1d4ed8;
  --role-user-bg: #cffafe;
  --role-user-fg: #0e7490;

  /* ---------- Data ramp ----------
     Blue→accent ramp for waveforms, bar charts and step indicators.
     Ordered lightest → strongest; --wave-5 is the accent itself. */
  --wave-1: #bfdbfe;
  --wave-2: #93c5fd;
  --wave-3: #60a5fa;
  --wave-4: #3b82f6;
  --wave-5: #2563eb;
  --step-1: #2563eb;
  --step-2: #3b82f6;
  --step-3: #93c5fd;
}

/* ============================================================
   DARK MODE — remap surfaces/text/borders only; brand hues and
   semantics stay identical so the palette reads in both themes.
   ============================================================ */
/* OS dark preference: consumers opt in by mirroring the OS setting onto the
   root element (document.documentElement.dataset.theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light').
   The remap itself lives ONLY under [data-theme="dark"] below so every token is
   registered with its theme scope. */
[data-theme="dark"] {
  /* Dark = the ROI-snapshot treatment applied site-wide: slate ground,
     hairline #1e293b rules, #60a5fa numerals. */
  --page-bg: radial-gradient(1000px 640px at 86% 0%, rgba(8,145,178,.34), transparent 62%), radial-gradient(820px 560px at 0% 58%, rgba(15,118,110,.24), transparent 60%), linear-gradient(180deg, #0f172a 0%, #0b1120 100%); /* @kind color */
  --band-a: #0f172a; /* @kind color */
  --band-b: #0b1120; /* @kind color */
  --footer-bg: #020617; /* @kind color */
  --on-gradient: #f1f5f9;
  --gradient-display: linear-gradient(135deg, #93c5fd 0%, #60a5fa 30%, #0891b2 100%); /* @kind color */
  --tint-border: #1e40af;
  --on-tint: #dbeafe;
  --on-accent: #0f172a;
  --wave-1: #0f766e;
  --wave-2: #0891b2;
  --wave-3: #3b82f6;
  --wave-4: #60a5fa;
  --wave-5: #93c5fd;
  --step-1: #60a5fa;
  --step-2: #0891b2;
  --step-3: #0f766e;
  --surface-page: var(--color-neutral-900);
  --surface-card: var(--color-neutral-800);
  --surface-raised: var(--color-neutral-800);
  --surface-sunken: #0b1220;
  --surface-inverse: var(--color-neutral-0);
  --text-primary: var(--color-neutral-50);
  --text-secondary: var(--color-neutral-300);
  --text-muted: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-500);
  --text-inverse: var(--color-neutral-900);
  --border-default: var(--color-neutral-700);
  --border-strong: var(--color-neutral-600);
  --color-success-bg: rgba(22, 163, 74, 0.18);
  --color-success-strong: #86efac;      /* 8.2:1 on the dark success tint */
  --color-warning-bg: rgba(217, 119, 6, 0.18);
  --color-warning-strong: #fcd34d;      /* 8.1:1 on the dark warning tint */
  --color-warning-solid-hover: #b45309; /* the amber fill stays dark in dark mode, so hover lightens instead */
  --color-error-bg: rgba(224, 82, 82, 0.16);
  --color-error-solid: #e05252;
  --on-error-solid: #0f172a;            /* dark --color-error-solid is #e05252: ink on it is 4.7:1, white only 3.8:1 */
  --color-error-soft: rgba(224, 82, 82, 0.14);
  --color-error-soft-border: rgba(224, 82, 82, 0.32);
  --color-error-strong: #fca5a5;
  --color-info-bg: rgba(37, 99, 235, 0.18);
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-tint: rgba(37, 99, 235, 0.22);
}