/* =============================================================
   TOKENS — the single source of truth for the design system.
   Nothing elsewhere declares a raw color, size, or font.
   Brand: Unfiltered Choice (part of Claudphic).
   Light mode is default; dark mode via [data-theme="dark"].
   ============================================================= */

:root {
  --brand-900: #0B0450;
  --brand-800: #100566;
  --brand-700: #14067F;
  --brand-600: #2712A6;
  --brand-500: #3D22C9;
  --brand-100: #E7E4FA;
  --brand-50:  #F3F1FD;

  --spark-700: #C25600;
  --spark-600: #E36400;
  --spark-500: #FD7100;
  --spark-400: #FF8A2E;
  --spark-100: #FFE7D2;
  --spark-50:  #FFF3E8;

  --signal-green: #0E9F6E;
  --signal-green-bg: #E1F5EC;
  --signal-amber: #B45309;
  --signal-amber-bg: #FEF3E2;
  --signal-red:   #C81E3A;
  --signal-red-bg:   #FDECEF;

  --color-primary:        var(--brand-700);
  --color-primary-strong: var(--brand-900);
  --color-primary-soft:   var(--brand-100);
  --color-accent:         var(--spark-500);
  --color-accent-strong:  var(--spark-600);
  --color-accent-soft:    var(--spark-100);
  --color-success:        var(--signal-green);
  --color-warning:        var(--signal-amber);
  --color-danger:         var(--signal-red);

  --ink-900: #12101F;
  --ink-700: #332F49;
  --ink-500: #5C5876;
  --ink-300: #9793AC;

  --canvas:       #F7F6FB;
  --surface:      #FFFFFF;
  --surface-alt:  #FBFAFE;
  --border:       #E7E4F1;
  --border-strong:#CFC9E3;

  --text-body:    var(--ink-700);
  --text-heading: var(--ink-900);
  --text-muted:   var(--ink-500);
  --text-invert:  #FFFFFF;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-data: "Space Mono", ui-monospace, monospace;

  --text-display: clamp(1.95rem, 4.6vw, 3.4rem);
  --text-h1: clamp(1.8rem, 3.8vw, 2.6rem);
  --text-h2: clamp(1.55rem, 3.2vw, 2.05rem);
  --text-h3: 1.35rem;
  --text-h4: 1.15rem;
  --text-h5: 1.02rem;
  --text-h6: .875rem;
  --text-body-size: 1.0625rem;
  --text-small: .9rem;
  --text-caption: .8125rem;

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.68;

  /* ---- Space scale (4px base) ---- */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;

  /* ---- Radii, borders, shadows ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(18, 8, 60, .07);
  --shadow-md: 0 10px 28px -10px rgba(18, 8, 60, .18);
  --shadow-lg: 0 24px 60px -16px rgba(18, 8, 60, .26);
  --shadow-glow: 0 0 0 1px rgba(253, 113, 0, .18), 0 16px 40px -14px rgba(253, 113, 0, .35);

  /* ---- Layout ---- */
  --container: 1370px;
  --container-narrow: 980px;
  --header-h: 68px;
  --bottom-nav-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, .8, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* ---- Legacy aliases (kept so admin.css / older refs still resolve) ---- */
  --harbor-900: var(--brand-900);
  --verdict-500: var(--spark-500);
  --verdict-600: var(--spark-600);
  --verdict-100: var(--spark-100);
}

[data-theme="dark"] {
  --canvas:       #0B0918;
  --surface:      #15122A;
  --surface-alt:  #1B1734;
  --border:       #2B2646;
  --border-strong:#3B3560;

  --text-body:    #CBC7E0;
  --text-heading: #F3F1FB;
  --text-muted:   #948FB4;

  --color-primary:        #A79CF0;
  --color-primary-strong: #C7BEFA;
  --color-primary-soft:   #241F45;
  --color-accent:         #FF8A2E;
  --color-accent-strong:  #FFA25C;
  --color-accent-soft:    #33220F;
  --signal-green-bg: #0E2A21;
  --signal-amber-bg: #2E2110;
  --signal-red-bg:   #3A1420;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .65);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}