/* ============================================================
   conva — design tokens  (Direction 02 — Azure, V4.0, 2026-08-14)
   Canonical source: conva_core/brand/conva_webUI_colorscheme_update_V4.0/
   design_handoff_conva_azure/README.md — "APPROVED", high-fidelity, final.
   Component styles reference the alias layer beneath it, so the whole site
   re-themes from these values in one place.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ===== conva V4.0 canonical tokens (Direction 02 — Azure) ===== */
  /* Surfaces */
  --color-bg: #060D14;
  --color-bg-2: #0A121C;      /* interpolated — V4.0 spec's 3-level ramp
                                  (ground/panel-1/panel-2) mapped onto this
                                  site's 4-level one; sits between bg and panel */
  --color-panel: #0C1722;
  --color-panel-raised: #12212E;
  --color-border: #1E3242;
  --color-border-strong: #2B4557;
  --color-edge: rgba(255, 255, 255, 0.10);
  /* Text */
  --color-fg: #EAF2F8;
  --color-fg-muted: #A6BDD0;
  --color-fg-faint: #6E8195;
  /* Voice accents — them/you repointed per V4.0's approved token table */
  --color-inbound: #35E0A6;   /* THEM */
  --color-outbound: #B79CFF;  /* YOU  */
  --color-ai: #FFC24B;        /* AI   — unchanged */
  --color-iris: #FF4FD8;      /* legacy gradient tail — no longer used for CTAs,
                                  kept defined in case anything still refs it */
  /* States */
  --color-rec: #FF6B6B;
  --color-ok: #4ADE97;
  --color-warn: #F6B24B;
  /* Action accent — flat fill, THE signature per V4.0. Replaces the iris
     gradient everywhere it was the CTA/headline accent. */
  --color-primary: #4FB8FF;
  --color-primary-lift: #7BCBFF;
  --on-primary: #04121F;
  --shadow-primary: 0 10px 32px rgba(79, 184, 255, 0.32), 0 0 0 1px rgba(53, 224, 166, 0.18);
  /* Aurora washes — hero/instrument panel background glow */
  --aurora-azure: rgba(79, 184, 255, .18);
  --aurora-indigo: rgba(123, 168, 255, .13);
  --aurora-lavender: rgba(183, 156, 255, .12);
  /* Signature gradient — RETAINED but no longer the CTA/headline accent. */
  --iris-angle: 100deg;
  --iris: linear-gradient(100deg, #22E4F5 0%, #7B5CFF 52%, #FF4FD8 100%);
  /* Type */
  --font-display: "Michroma", "Eurostile", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Radii — per V4.0: cards 16px, hero/instrument panel 20px, chips/pills 999px,
     buttons 11px, transcript bubbles asymmetric 0 9px 9px 9px */
  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-bubble: 0 9px 9px 9px;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-hero: 0 30px 80px -30px rgba(0, 0, 0, .6);
  --shadow-glow: 0 10px 32px rgba(123, 92, 255, 0.32), 0 0 0 1px rgba(34, 228, 245, 0.18);
  /* Glass */
  --glass-blur: 18px;
  --glass-surface: rgba(255, 255, 255, 0.045);
  --glass-hairline: rgba(255, 255, 255, 0.10);
  /* Voice tints (derived) */
  --tint-inbound: rgba(53, 224, 166, 0.09);   --line-inbound: rgba(53, 224, 166, 0.28);
  --tint-outbound: rgba(183, 156, 255, 0.10); --line-outbound: rgba(183, 156, 255, 0.30);
  --tint-ai: rgba(255, 194, 75, 0.08);        --line-ai: rgba(255, 194, 75, 0.30);

  /* ===== two-tone mark counter ===== */
  /* The logo's ring gap + core notch are PAINTED in the surface behind the
     mark, not cut out. It follows the page background and flips with the
     theme automatically. Override locally if the mark sits on another surface. */
  --conva-counter: var(--color-bg);

  /* ===== component alias layer (maps this site's names to the tokens above) ===== */
  --void: var(--color-bg);
  --deep: var(--color-bg-2);
  --panel: var(--color-panel);
  --panel-2: var(--color-panel-raised);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --hairline: var(--glass-hairline);
  --rim: rgba(180, 210, 255, 0.28);
  --glass: var(--glass-surface);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --text: var(--color-fg);
  --text-2: var(--color-fg-muted);
  --muted: var(--color-fg-muted);
  --faint: var(--color-fg-faint);
  --iris-on: #05060E;      /* text colour on top of --iris (dark theme: iris is bright) */
  --on-iris: var(--iris-on);
  --primary: var(--color-primary);
  --primary-lift: var(--color-primary-lift);
  --faint-panel: #7E88AD; /* faint labels that sit on raised panels — AA on #141A31 */
  --cyan: var(--color-inbound);
  --violet: var(--color-outbound);
  --gold: var(--color-ai);
  --magenta: var(--color-iris);
  --cyan-bg: var(--tint-inbound);   --cyan-line: var(--line-inbound);
  --violet-bg: var(--tint-outbound); --violet-line: var(--line-outbound);
  --gold-bg: var(--tint-ai);        --gold-line: var(--line-ai);
  --danger: var(--color-rec);
  --warn: var(--color-warn);
  --success: var(--color-ok);
  --font-mark: var(--font-display);
  --r-8: var(--radius-sm);
  --r-11: var(--radius);
  --r-12: var(--radius);
  --r-16: var(--radius-lg);
  --r-18: var(--radius-lg);
  --r-20: var(--radius-xl);
  --r-26: var(--radius-xl);
  --r-pill: 999px;
  --shadow-iris: var(--shadow-glow);
  --shadow-card: var(--shadow-lg);
  --focus-ring: 0 0 0 3px rgba(79, 184, 255, 0.4);

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(1.15rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vw, 8.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== LIGHT THEME (dark is primary; this drives light entirely) =====
   Direction 02 — Azure's own light re-derivation, from the same README. */
:root[data-theme="light"] {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --color-bg: #F3F6FA;
  --color-bg-2: #EEF2F7;
  --color-panel: #FFFFFF;
  --color-panel-raised: #EAEFF5;
  --color-border: #DBE3EC;
  --color-border-strong: #C4D0DD;
  --color-edge: rgba(18, 22, 43, 0.10);

  /* ---- Text ---- */
  --color-fg: #0B1420;
  --color-fg-muted: #3F4E5C;
  /* Was #6E7C8A — measured 4.28:1 on white, under the 4.5:1 AA floor for the
     small/mono text this token is almost always used on (instrument-bar
     readouts, metric-tile labels, footer copy, waitlist fineprint — see
     styles/main.css). #5C6B79 clears AA (~5.5:1) at the same hue. */
  --color-fg-faint: #5C6B79;

  /* ---- Voice accents ---- */
  --color-inbound: #0A8A62;   /* THEM */
  --color-outbound: #6A4FE0;  /* YOU  */
  --color-ai: #8A5800;        /* ALLY */
  --color-iris: #C21BA0;      /* tail */

  /* ---- Voice accents — large fills only (chips/dots ≥24px, gradient stops) ---- */
  --color-inbound-vivid: #35E0A6;
  --color-outbound-vivid: #B79CFF;
  --color-ai-vivid: #FFC24B;
  --color-iris-vivid: #FF4FD8;

  /* ---- States ---- */
  --color-rec: #C43D3D;
  --color-ok: #0A8A62;
  --color-warn: #B5730A;

  /* ---- Action accent ---- */
  --color-primary: #0E6FB8;
  --color-primary-lift: #1580CE;
  --on-primary: #FFFFFF;
  --shadow-primary: 0 8px 24px rgba(14, 111, 184, 0.18);
  --aurora-azure: rgba(14, 111, 184, .12);
  --aurora-indigo: rgba(91, 124, 255, .10);
  --aurora-lavender: rgba(106, 79, 224, .10);

  /* ---- Signature gradient — darkened so white text on it clears AA ---- */
  --iris: linear-gradient(100deg, #06788A 0%, #5B3FD6 52%, #C21BA0 100%);
  --iris-on: #FFFFFF;

  /* ---- Voice tints ---- */
  --tint-inbound: rgba(10, 138, 98, 0.07);   --line-inbound: rgba(10, 138, 98, 0.30);
  --tint-outbound: rgba(106, 79, 224, 0.07); --line-outbound: rgba(106, 79, 224, 0.30);
  --tint-ai: rgba(138, 88, 0, 0.07);         --line-ai: rgba(138, 88, 0, 0.30);

  /* ---- Shadows (tighter/softer for light) ---- */
  --shadow-sm: 0 1px 2px rgba(18, 22, 43, 0.06);
  --shadow-md: 0 6px 18px rgba(18, 22, 43, 0.08);
  --shadow-lg: 0 18px 44px rgba(18, 22, 43, 0.12);
  --shadow-hero: 0 24px 60px -24px rgba(18, 22, 43, .18);
  --shadow-glow: 0 8px 24px rgba(91, 63, 214, 0.18);

  /* ---- Glass ---- */
  --glass-surface: rgba(255, 255, 255, 0.72);
  --glass-hairline: rgba(18, 22, 43, 0.08);

  /* ---- Logo counters equal the surface behind the mark ---- */
  --conva-counter: #F3F6FA;

  /* ---- site-specific aliases not covered by the canonical tokens above ---- */
  --glass-strong: rgba(18, 22, 43, 0.06);
  --rim: rgba(60, 90, 160, 0.28);
  --faint-panel: var(--color-fg-faint);
  --focus-ring: 0 0 0 3px rgba(14, 111, 184, 0.45);
}

/* Headline gradient fragment — legible accent hues in light theme (not pastel).
   Use background-image (longhand): the `background` shorthand would reset
   background-clip back to border-box and un-clip the text into solid boxes. */
:root[data-theme="light"] .grad-text {
  background-image: linear-gradient(100deg, #2B62C4 0%, #6B3FC4 52%, #C21BA0 100%);
  -webkit-background-clip: text; background-clip: text;
}