/* ============================================================
   conva — design tokens  (Brand + palette V2.0)
   The canonical block below is the brand handoff's tokens.css,
   verbatim. 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 V2 canonical tokens (from brand handoff) ===== */
  /* Surfaces */
  --color-bg: #05060E;
  --color-bg-2: #0A0E1E;
  --color-panel: #0E1326;
  --color-panel-raised: #141A31;
  --color-border: #1C2340;
  --color-border-strong: #2E3861;
  --color-edge: rgba(255, 255, 255, 0.10);
  /* Text */
  --color-fg: #EEF1FF;
  --color-fg-muted: #A3ACCC;
  --color-fg-faint: #6E7799;
  /* Voice accents */
  --color-inbound: #22E4F5;   /* THEM */
  --color-outbound: #8B6BFF;  /* YOU  */
  --color-ai: #FFC24B;        /* AI   */
  --color-iris: #FF4FD8;      /* gradient tail — decorative, never a speaker */
  /* States */
  --color-rec: #FF4D5E;
  --color-ok: #2FD08A;
  /* Signature gradient */
  --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 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  /* 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-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(34, 228, 245, 0.09);   --line-inbound: rgba(34, 228, 245, 0.28);
  --tint-outbound: rgba(139, 107, 255, 0.10); --line-outbound: rgba(139, 107, 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);
  --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);
  --success: var(--color-ok);
  --font-mark: var(--font-display);
  --r-8: var(--radius-sm);
  --r-11: 11px;
  --r-12: var(--radius);
  --r-18: var(--radius-lg);
  --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(34, 228, 245, 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) =====
   Same three voices, re-derived for light surfaces. Every voice-colour value
   here clears 4.5:1 against --color-bg #F0F1F5, so it is safe at body size.
   The darkened voice values are for text/borders/small marks; large fills
   (chips/dots ≥24px, gradient stops, decorative glows) may keep the vivid
   dark-theme hues via the *-vivid tokens. Dark theme is untouched. */
:root[data-theme="light"] {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --color-bg: #F0F1F5;
  --color-bg-2: #E8EAF2;
  --color-panel: #FFFFFF;
  --color-panel-raised: #FFFFFF;
  --color-border: #DDE1EC;
  --color-border-strong: #C9CFDE;
  --color-edge: rgba(18, 22, 43, 0.10);

  /* ---- Text ---- */
  --color-fg: #12162B;        /* 15.8:1 */
  --color-fg-muted: #414A66;  /*  7.8:1 */
  --color-fg-faint: #5B6480;  /*  5.4:1 — meta text ≥13px only */

  /* ---- Voice accents — text, borders, small marks (all ≥4.5:1 on #F0F1F5) ---- */
  --color-inbound: #06788A;   /* THEM · 4.58:1 */
  --color-outbound: #5B3FD6;  /* YOU  · 5.95:1 */
  --color-ai: #8A5A00;        /* ALLY · 5.25:1 */
  --color-iris: #C21BA0;      /* tail · 4.70:1 */

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

  /* ---- States ---- */
  --color-rec: #C42A38;       /* 5.1:1 */
  --color-ok: #0A7A52;        /* 4.8:1 */

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

  /* ---- Voice tints ---- */
  --tint-inbound: rgba(6, 120, 138, 0.07);   --line-inbound: rgba(6, 120, 138, 0.30);
  --tint-outbound: rgba(91, 63, 214, 0.07);  --line-outbound: rgba(91, 63, 214, 0.30);
  --tint-ai: rgba(138, 90, 0, 0.07);         --line-ai: rgba(138, 90, 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-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: #F0F1F5;

  /* ---- 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(6, 120, 138, 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;
}