/**
 * Design Tokens — the single source of truth for values shared across
 * every CSS file in the product.
 *
 * This is Layer 1 of the four-layer CSS architecture documented in
 * docs/design/architecture/static-site-adoption-plan.md §CSS sharing
 * strategy. What lives here:
 *
 *   • Palette (backgrounds, borders, text)
 *   • Accent + status colors
 *   • Typography — the committed Fraunces / Source Serif 4 / JetBrains
 *     Mono font-family stack
 *   • Spacing scale
 *
 * What does NOT live here:
 *   • Element styling (.card, .button, .form-field → base.css or a
 *     per-feature file)
 *   • Layout structure (page grid, regions → layout.css)
 *   • Per-feature overrides (→ the feature's own CSS file)
 *
 * When to change this file:
 *   • Rarely. Tokens are intended to propagate globally when they change.
 *   • When adding a new palette entry (avoid if you can — propose a
 *     semantic name first, e.g. --border-emphasis instead of --gray-400).
 *   • When formalizing a new spacing step or type size that needs to be
 *     referenced from multiple places.
 *
 * When NOT to change this file:
 *   • When one page needs a slightly different shade. That's local
 *     styling — put it in the feature's own CSS file.
 *   • When adding a new component. Layer 2 (base.css) is for component
 *     defaults; each feature's CSS is for overrides.
 *
 * Load order matters: tokens.css must be loaded BEFORE any file that
 * references a var(--token) or the variables won't resolve. index.html
 * places it first in the <link> chain.
 */

:root {
  /* ---------------------------------------------------------------------
     Palette — Dark theme (canonical)
     --------------------------------------------------------------------- */

  /* Backgrounds */
  --bg-body:     #0e0e0e;
  --bg-primary:  #1a1a1a;
  --bg-secondary: #0a0a0a;
  --bg-hover:    #242424;
  --bg-disabled: #3a3a3a;
  --bg-darkest:  #000000;

  /* Borders */
  --border-primary:  #2a2a2a;
  --border-emphasis: #3a3a3a;

  /* Text */
  --text-primary:   #e8e8e8;
  --text-secondary: #b0b0b0;
  --text-muted:     #808080;
  --text-disabled:  #666666;

  /* Accent (the brand's second color — used sparingly; see
     frontend-visual-system.md §Red rules) */
  --accent-red:       #e63946;
  --accent-red-hover: #d62839;
  --accent-red-bg:    rgba(230, 57, 70, 0.2);

  /* Extended accents — purple (magic / designer tier), pink (event entities),
     orange (wound) */
  --accent-purple:    #a855f7;
  --accent-purple-bg: rgba(168, 85, 247, 0.2);
  --accent-pink:      #f472b6;
  --accent-pink-bg:   rgba(244, 114, 182, 0.2);
  --wound-orange:     #fb923c;
  --wound-orange-bg:  rgba(251, 146, 60, 0.2);

  /* Text on filled accent / status backgrounds */
  --text-on-accent:   #ffffff;

  /* Status colors */
  --success: #4ade80;
  --error:   #f87171;
  --warning: #fbbf24;
  --info:    #60a5fa;

  /* Transparent status backgrounds for badges / message boxes */
  --success-bg: rgba(74, 222, 128, 0.2);
  --error-bg:   rgba(248, 113, 113, 0.2);
  --warning-bg: rgba(251, 191, 36, 0.2);
  --info-bg:    rgba(96, 165, 250, 0.2);

  /* ---------------------------------------------------------------------
     Typography — the committed trio
     --------------------------------------------------------------------- */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Opentype axis defaults for Fraunces (override per-element where
     needed). Fraunces exposes opsz + wght + SOFT. */
  --display-opsz: 96;
  --display-wght: 700;
  --display-soft: 30;

  /* Source Serif 4 opsz default for body copy. */
  --body-opsz: 18;

  /* ---------------------------------------------------------------------
     Spacing scale
     --------------------------------------------------------------------- */

  --space-1: 0.25rem;  /* 4px   — hairline gaps */
  --space-2: 0.5rem;   /* 8px   — tight gaps inside a component */
  --space-3: 1rem;     /* 16px  — standard gap between elements */
  --space-4: 1.5rem;   /* 24px  — gap between sections of a card */
  --space-5: 2rem;     /* 32px  — gap between major page sections */
  --space-6: 3rem;     /* 48px  — generous vertical page padding */
  --space-7: 4rem;     /* 64px  — hero / landing breathing room */
}

/* ---------------------------------------------------------------------------
   Light theme overrides — swap palette + accent + status values, keep
   typography and spacing untouched. Applied via html[data-theme="light"]
   by auth-web/events.cljs :theme/apply reg-fx.
   --------------------------------------------------------------------------- */
html[data-theme="light"] {
  /* Backgrounds */
  --bg-body:     #f5f5f5;
  --bg-primary:  #ffffff;
  --bg-secondary: #eaeaea;
  --bg-hover:    #e0e0e0;
  --bg-disabled: #d0d0d0;
  --bg-darkest:  #dcdcdc;

  /* Borders */
  --border-primary:  #d0d0d0;
  --border-emphasis: #b0b0b0;

  /* Text */
  --text-primary:   #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted:     #707070;
  --text-disabled:  #a0a0a0;

  /* Accent — slightly darker for white-bg contrast */
  --accent-red:       #d62839;
  --accent-red-hover: #b81e2e;
  --accent-red-bg:    rgba(214, 40, 57, 0.1);

  /* Extended accents — slightly darker shades for white-bg contrast */
  --accent-purple:    #7c3aed;
  --accent-purple-bg: rgba(124, 58, 237, 0.1);
  --accent-pink:      #db2777;
  --accent-pink-bg:   rgba(219, 39, 119, 0.1);
  --wound-orange:     #ea580c;
  --wound-orange-bg:  rgba(234, 88, 12, 0.1);
  --text-on-accent:   #ffffff;

  /* Status — darker for white-bg readability */
  --success: #16a34a;
  --error:   #dc2626;
  --warning: #d97706;
  --info:    #2563eb;

  /* Transparent status backgrounds */
  --success-bg: rgba(22, 163, 74, 0.1);
  --error-bg:   rgba(220, 38, 38, 0.1);
  --warning-bg: rgba(217, 119, 6, 0.1);
  --info-bg:    rgba(37, 99, 235, 0.1);
}