/* ==========================================================================
   ZAON DESIGN TOKENS — single source of truth (Phase 2 of the unification)
   Canonical names = the Clarity design system (aligned to the Zaon app,
   4-hue law: purple = interaction only; green/amber/red = status; no cyan).
   Legacy aliases keep css/styles.css and per-page inline styles working.
   Load this file BEFORE styles.css / clarity.css on every page.
   ========================================================================== */

:root {
  /* ---- warm-neutral ground (light default) ---- */
  --bg:            #F8F8F6;
  --bg-2:          #F1F0EC;
  --bg-deep:       #FFFFFF;   /* alternating/deep sections */
  --card:          #FFFFFF;
  --card-2:        #FBFBF9;
  --card-hover:    #F4F3F0;
  --fill:          #F4F3F0;
  --line:          #E7E4DF;
  --line-2:        #D6D2CB;

  --ink:           #1F2937;
  --ink-soft:      #4B5563;
  --ink-faint:     #6B7280;

  /* ---- brand: interaction & identity ONLY ---- */
  --accent:        #8B5CF6;
  --accent-dark:   #7C3AED;
  --link:          #6D28D9;
  --accent-wash:   #EDE9FE;
  --accent-line:   #C4B5FD;
  --gradient:      linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);

  /* ---- status: three hues, dual-coded with icons ---- */
  --verified:      #047857;  --verified-wash: #D1FAE5;  --verified-line: #6EE7B7;  --verified-solid: #34D399;
  --attention:     #B45309;  --attention-wash:#FEF3C7;  --attention-line:#FCD34D;  --attention-solid:#FBBF24;
  --conflict:      #B91C1C;  --conflict-wash: #FEE2E2;  --conflict-line: #FCA5A5;  --conflict-solid: #F87171;
  --neutral:       #6B7280;  --neutral-wash:  #F4F3F0;

  /* ---- elevation: black shadows on flat surfaces; glow = primary CTA only ---- */
  --shadow:        0 1px 2px rgba(17,16,15,.05), 0 8px 24px -14px rgba(17,16,15,.18);
  --shadow-lift:   0 2px 6px rgba(17,16,15,.06), 0 20px 44px -20px rgba(17,16,15,.26);
  --glow:          0 0 44px rgba(139,92,246,.28);

  /* ---- typography ---- */
  --display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* ---- layout & shape ---- */
  --maxw:       1120px;
  --r:          14px;
  --r-lg:       20px;
  --nav-height: 68px;
  --nav-h:      68px;
}

:root[data-theme="dark"] {
  --bg:            #131211;
  --bg-2:          #1A1917;
  --bg-deep:       #0D0C0B;
  --card:          #1C1B19;
  --card-2:        #201F1C;
  --card-hover:    #262523;
  --fill:          #2B2A27;
  --line:          #302E2B;
  --line-2:        #3B3936;

  --ink:           #F3F4F6;
  --ink-soft:      #9CA3AF;
  --ink-faint:     #6B7280;

  --accent:        #8B5CF6;
  --accent-dark:   #7C3AED;
  --link:          #A78BFA;
  --accent-wash:   rgba(139,92,246,.16);
  --accent-line:   rgba(139,92,246,.42);

  --verified:      #6EE7B7;  --verified-wash: rgba(52,211,153,.14);  --verified-line: rgba(52,211,153,.42);
  --attention:     #FCD34D;  --attention-wash:rgba(251,191,36,.14);  --attention-line:rgba(251,191,36,.42);
  --conflict:      #FCA5A5;  --conflict-wash: rgba(248,113,113,.15); --conflict-line: rgba(248,113,113,.42);
  --neutral:       #9CA3AF;  --neutral-wash:  #2B2A27;

  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lift:   0 3px 8px rgba(0,0,0,.5), 0 26px 54px -22px rgba(0,0,0,.7);
  --glow:          0 0 48px rgba(139,92,246,.32);
}

/* ==========================================================================
   LEGACY ALIASES — names used by css/styles.css and page inline styles.
   Values resolve through the canonical tokens above, so theming is
   automatic. Retire with Phase 3/4 as components consolidate.
   ========================================================================== */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  /* colors */
  --primary:          var(--accent);
  --primary-light:    #A78BFA;
  --primary-dark:     var(--accent-dark);
  --accent-secondary: var(--conflict-solid);
  --accent-green:     var(--verified-solid);

  /* backgrounds */
  --bg-dark:       var(--bg);
  --bg-darker:     var(--bg-deep);
  --bg-card:       var(--card);
  --bg-card-hover: var(--card-hover);

  /* text */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted:     var(--ink-faint);

  /* borders */
  --border-subtle: var(--line);
  --border-glow:   var(--accent-line);

  /* gradients */
  --gradient-primary: var(--gradient);

  /* shadows */
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow-lift);
  --shadow-lg: var(--shadow-lift);
  --shadow-glow: var(--glow);
  --shadow-glow-accent: var(--glow);

  /* type */
  --font-family:  var(--body);
  --font-display: var(--display);
  --font-size-xs: 0.75rem;  --font-size-sm: 0.875rem; --font-size-base: 1rem;
  --font-size-lg: 1.125rem; --font-size-xl: 1.25rem;  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;    --font-size-4xl: 2.5rem;  --font-size-5xl: 3.5rem;  --font-size-6xl: 4.5rem;

  /* spacing */
  --space-xs: 0.5rem; --space-sm: 1rem;  --space-md: 1.5rem; --space-lg: 2rem;
  --space-xl: 3rem;   --space-2xl: 4rem; --space-3xl: 6rem;

  /* shape — snapped to the 5-stop scale: 6 / 10 / 14 / 20 / pill */
  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 10px;
  --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px;

  /* motion & layout */
  --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
  --container-max: 1200px;
}

/* theme-dependent legacy values that have no canonical equivalent */
:root, :root[data-theme="light"] {
  --bg-glass: rgba(255,255,255,.72);
  --gradient-dark: linear-gradient(180deg, #F8F8F6 0%, #FFFFFF 100%);
  --gradient-radial: radial-gradient(ellipse at center, rgba(139,92,246,.08) 0%, transparent 70%);
}
:root[data-theme="dark"] {
  --bg-glass: rgba(255,255,255,.04);
  --gradient-dark: linear-gradient(180deg, #131211 0%, #0D0C0B 100%);
  --gradient-radial: radial-gradient(ellipse at center, rgba(139,92,246,.14) 0%, transparent 70%);
}