/* ============================================================
   LINQURA · COLOR TOKENS — Concept B (Frontier AI Aesthetic)
   Dark canvas is the DEFAULT. White is an accent exception only.
   Source: Linqura Website Design System v2, §2 + §10.1
   ============================================================ */

:root {
  /* ---- Background stack (dark canvas — the default) ---- */
  --ink-1: #0A0F0E;          /* Page background. Deepest dark. Every page starts here. */
  --ink-2: #0E1513;          /* Card / panel / stat-block fills. */
  --ink-3: #121B18;          /* Elevated card BG, hover fills, product cards. */
  --moat-canvas-bg: #070C0B; /* Latent-field canvas fill (darkest of all). */

  /* ---- Accent surfaces (exceptions, not defaults) ---- */
  --paper: #FFFFFF;          /* White — ONLY in accent sections (How It Works step cards). */
  --teal-wash: #EBF5F2;      /* Light-mode highlight / pull-quote BG on white sections only. */

  /* ---- Brand teals ---- */
  --teal: #71B3A2;           /* Core brand. Pipeline arrows, light-section accents, step numbers. */
  --teal-bright: #6EE7C7;    /* Eyebrows, CTA gradient top, active nav, glows, chip values. */
  --teal-brightest: #8FF0D6; /* Hover glow color, nav hover, ghost-button hover text. */

  /* ---- Text on dark ---- */
  --text-primary: #EAF2EF;   /* Body copy on dark. Hero subhead. Card descriptions. */
  --text-muted: #93A8A2;     /* Supporting copy, nav links (default), subtitles, stat labels. */
  --text-faint: #7E938D;     /* Metadata, footer copy, timestamps, legal text. Lightened v9 to pass WCAG AA on --ink-1. */

  /* ---- Text on light (white/accent sections only) ---- */
  --text-body-light: #333333;  /* Body copy in white sections only. */
  --text-muted-light: #666666; /* Supporting copy in white sections only. */

  /* ---- Borders ---- */
  --border-dark: rgba(255, 255, 255, 0.09);    /* Default border on dark cards/panels/nav. */
  --border-accent: rgba(110, 231, 199, 0.28);  /* Hover / active / section-label decorators. */
  --border-light: #D9D9D9;                     /* Borders on white/light sections. */

  /* ---- Glow values (rgba — never swap for solid hex) ---- */
  --glow-cta:        rgba(110, 231, 199, 0.55); /* CTA button glow (default) — box-shadow only. */
  --glow-cta-hover:  rgba(110, 231, 199, 0.70); /* CTA button glow on hover — box-shadow only. */
  --glow-metric:     rgba(110, 231, 199, 0.30); /* Stat/metric number glow — text-shadow only. */
  --glow-cta-ring:        rgba(143, 240, 214, 0.40); /* CTA 1px ring (default). */
  --glow-cta-ring-hover:  rgba(143, 240, 214, 0.60); /* CTA 1px ring (hover). */

  /* ---- Forbidden-state note ---- */
  /* Error states use a warm muted tone — NEVER pure red. */
  --warn: rgba(255, 100, 100, 0.8);

  /* ============================================================
     DATA-VISUALIZATION SUB-PALETTE (v9 §3.1)
     Scope: DATA GRAPHICS ONLY — chart series, domain clusters,
     ranked states. Never on marketing surfaces, headlines, CTAs.
     Four-step tonal ramp inside the existing teal family.
     ============================================================ */
  --dv-1: #8FF0D6;                 /* Ramp step 1 — highest emphasis / top rank. */
  --dv-2: #6EE7C7;                 /* Ramp step 2. */
  --dv-3: #71B3A2;                 /* Ramp step 3. */
  --dv-4: #3E6B5F;                 /* Ramp step 4 — lowest emphasis / base layer. */

  /* Semantic signal — flagged changes (new violations, reprice-required,
     detected deltas). Derived from --warn; warm, muted, never pure red.
     Risk signals must NOT render in the same teal as positive states. */
  --signal: rgba(255, 140, 100, 0.85);
  --signal-bg: rgba(255, 140, 100, 0.06);
  --signal-border: rgba(255, 140, 100, 0.22);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --surface-page: var(--ink-1);
  --surface-card: var(--ink-2);
  --surface-card-elevated: var(--ink-3);
  --surface-accent: var(--paper);

  --text-default: var(--text-primary);
  --text-supporting: var(--text-muted);
  --text-meta: var(--text-faint);

  --accent: var(--teal-bright);
  --accent-core: var(--teal);
  --accent-hover: var(--teal-brightest);

  --border-default: var(--border-dark);
  --border-hover: var(--border-accent);

  /* Card gradient fill (dark context) */
  --card-fill: linear-gradient(180deg, rgba(18, 27, 24, 0.7), rgba(12, 18, 16, 0.7));
  --card-fill-product: linear-gradient(180deg, rgba(18, 27, 24, 0.85), rgba(11, 17, 15, 0.9));

  /* The two — and only two — permitted gradients */
  --gradient-cta: linear-gradient(180deg, #6EE7C7, #71B3A2);     /* @kind color */ /* Primary CTA fill. */
  --gradient-headline: linear-gradient(120deg, #8FF0D6, #71B3A2);/* @kind color */ /* Hero H1 accent phrase (clip:text). */
}