/* ============================================================================
   BitRank Express — Design System tokens  ("Deep Violet + Warm Ink")
   Source of truth: 00-intake/build-brief.md §2 (transcribed verbatim — do NOT
   alter colours/tokens/type without a design decision recorded in decisions.md).

   Rules that ride with these tokens:
   - Brand violet/gold NEVER signal risk. Risk uses the separate scale below,
     and ONLY inside score demos / sample results / system feedback.
   - Blue is never a primary (that's the whole competitor category).
   - Gold is used sparingly (upgrade/premium/"Enterprise"), never on large surfaces.
   - Score direction: higher BitRank = safer; a sanctioned address is forced to 0.
   ========================================================================== */

:root {
  /* ── Brand — violet ── */
  --brand-primary:        #5B2E9B;  /* deep royal violet — brand, logo, key emphasis */
  --brand-primary-hover:  #4A2480;
  --brand-interactive:    #7C3AED;  /* CTA / buttons / links / active states */
  --brand-interactive-hv: #6D28D9;
  --brand-deep:           #3B1D66;  /* darkest violet — gradients, dark headers */
  --brand-subtle:         #F5F2FC;  /* tint background (selected rows, ghost hover) */
  --brand-subtle-2:       #E9E1F8;
  --brand-on-primary:     #FFFFFF;  /* text/icons on violet */

  /* ── Accent — warm gold (sparing: highlights, upgrade/premium, NOT risk) ── */
  --accent-gold:          #F2B705;
  --accent-gold-hover:    #D99E04;
  --accent-gold-subtle:   #FDF6E3;
  --accent-on-gold:       #241B33;

  /* ── Warm ink neutrals (plum-tinted warm greys) ── */
  --ink-900:              #17131F;  /* darkest — footer, dark sections, header ink */
  --ink-800:              #241B33;  /* primary text on light */
  --ink-700:              #332943;
  --ink-600:              #6B6577;  /* secondary text */
  --ink-500:              #8E8899;  /* muted / placeholder */
  --ink-400:              #ADA8B8;
  --ink-300:              #CFC9D9;  /* strong borders */
  --ink-200:              #E7E2F0;  /* default borders / dividers */
  --ink-100:              #F1EEF6;  /* subtle dividers */
  --ink-50:               #FAF9FC;  /* section background tint */
  --white:                #FFFFFF;

  /* ── Surfaces ── */
  --surface-page:         #FAF9FC;
  --surface-card:         #FFFFFF;
  --surface-sunken:       #F5F2FC;
  --surface-inverse:      #17131F;  /* dark hero / footer / feature bands */
  --surface-inverse-2:    #241B33;

  /* ── Text ── */
  --text-primary:         #241B33;
  --text-secondary:       #6B6577;
  --text-muted:           #8E8899;
  --text-inverse:         #FFFFFF;
  --text-inverse-muted:   #B7B1C4;
  --text-link:            #6D28D9;

  /* ── Borders ── */
  --border-default:       #E7E2F0;
  --border-strong:        #CFC9D9;
  --border-focus:         #7C3AED;

  /* ── Typography ── */
  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; /* addresses, hashes, scores */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Type scale (size/line-height) — see brief §2.5:
     Display 56/62 700 · H1 40/48 700 · H2 30/38 600 · H3 22/30 600 · H4 18/26 600
     Body-L 18/28 400 · Body 16/26 400 · Small 14/22 · Caption 12/16 500 UPPERCASE +0.06em
     Mono 14/22 (addresses/hashes; sample score numbers use Mono 700). */

  /* ── Spacing (4px base) ── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  /* ── Radii ── */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  /* ── Elevation ── */
  --shadow-sm:0 1px 2px rgba(23,19,31,0.06);
  --shadow-md:0 4px 12px rgba(23,19,31,0.08);
  --shadow-lg:0 12px 32px rgba(23,19,31,0.12);
  --focus-ring:0 0 0 3px rgba(124,58,237,0.35);

  /* ── Functional risk-status scale (score demos / sample results / feedback ONLY) ── */
  --risk-low:        #1F9D6B; --risk-low-bg:       #E6F6EF;
  --risk-medium:     #E8A317; --risk-medium-bg:    #FDF3DD;
  --risk-high:       #E8663A; --risk-high-bg:      #FCEBDF;
  --risk-severe:     #D23A3A; --risk-severe-bg:    #FBE7E7;
  --risk-sanctioned: #B01C1C; --risk-sanctioned-bg:#F7DCDC;

  --success:#1F9D6B; --success-bg:#E6F6EF;
  --warning:#E8A317; --warning-bg:#FDF3DD;
  --error:  #D23A3A; --error-bg:  #FBE7E7;
  --info:   #4A5AD9; --info-bg:   #ECEEFB; /* violet-leaning info, not category blue */

  /* ── Data-viz palette (score-factor bars / charts) ── */
  --viz-1:#7C3AED; --viz-2:#F2B705; --viz-3:#A24BB8; --viz-4:#4E8D8A; --viz-5:#4257B2; --viz-6:#C77DAE;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Theme-aware: OS preference via @media, plus an on-page toggle that stamps
   data-theme on :root and must win in BOTH directions.
   NOTE: hero, dark feature bands, and footer stay dark in both themes — only
   light sections flip. Style components through tokens, never hardcode here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:#141019; --surface-card:#211A2E; --surface-sunken:#1B1626;
    --text-primary:#F4F1FA; --text-secondary:#B7B1C4; --text-muted:#8E8899;
    --border-default:#312842; --border-strong:#42385A;
    --brand-subtle:#241B33; --brand-subtle-2:#2C2140;
  }
}
:root[data-theme="dark"] {
  --surface-page:#141019; --surface-card:#211A2E; --surface-sunken:#1B1626;
  --text-primary:#F4F1FA; --text-secondary:#B7B1C4; --text-muted:#8E8899;
  --border-default:#312842; --border-strong:#42385A;
  --brand-subtle:#241B33; --brand-subtle-2:#2C2140;
}

/* Accessibility baseline (kept from studio template) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}