/* Chitmunk: Shared Design Tokens */
/* Single source of truth for colors, spacing, typography, radii, shadows */
/* Theme switching via data-theme attribute on <html> */

/* ── Theme-Invariant Tokens ── */
:root {
  --on-accent: #1A1612;          /* ink on the amber accent (buttons, active tool) */
  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;           /* editor default; site overrides to 16px */
  --radius-pill: 100px;
  --radius-button: 8px;        /* canonical button radius across marketing + product */

  /* Shadows — overridden per theme below */

  /* Transitions */
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Type scale (compact app sizes) */
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 16px;

  /* Font families — single source of truth across product + marketing */
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-heading: 'Bricolage Grotesque', 'Nunito', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;          /* editorial accent — game cards on /home */

  /* Tier identity tokens — gaming rarity convention (Common/Rare/Epic) */
  --tier-common: #9C9588;       /* warm gray */
  --tier-rare: #4A9FE8;         /* cool blue — canon Rare */
  --tier-epic: #8B5CF6;         /* purple — canon Epic */
  --tier-common-bg: rgba(156, 149, 136, 0.10);
  --tier-rare-bg: rgba(74, 159, 232, 0.10);
  --tier-epic-bg: rgba(139, 92, 246, 0.10);
  /* Epic as a fill with white ink (5.7:1) and as a word on white (5.7:1).
     The dark theme lifts the word colour; the fill stays. */
  --tier-epic-strong: #7C3AED;
  --tier-epic-strong-hover: #6D2FE0;
  --tier-epic-text: #7C3AED;
}

/* ── Light Theme (default) ── */
:root, [data-theme="light"] {
  color-scheme: light;

  /* Backgrounds */
  --bg: #FFFFFF;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F6F3;
  --bg-panel: #FAFAF8;
  --bg-input: #F0EFEC;
  --bg-elevated: #F0EFEC;
  --bg-tertiary: #E8E5E0;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F7F6F3;
  --bg-canvas: #E8E5E0;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-hover-strong: rgba(0, 0, 0, 0.07);

  /* Accent (warm amber — shared across themes) */
  --accent: #E8913A;
  --accent-hover: #D5802E;
  --accent-glow: rgba(232, 145, 58, 0.12);
  --accent-dim: rgba(232, 145, 58, 0.06);
  --accent-bg: rgba(232, 145, 58, 0.10);
  --accent-light: #FDF5EC;

  /* Text */
  --text: #1A1815;
  --text-secondary: #4A453D;
  --text-muted: #6B6459;
  --text-dim: #9C9588;
  --accent-ink: #9C520D;        /* amber as text/ring on light surfaces (5.8:1); fills stay --accent */
  --focus-ring: #9C520D;
  --border-input: #8F887D;      /* resting edge of form fields (3.4:1) */

  /* Borders */
  --border: #E8E5E0;
  --border-subtle: #F0EDEA;
  --border-light: #E0DDD8;

  /* Feedback */
  --danger: #DC3545;
  --danger-dim: rgba(220, 53, 69, 0.08);
  --success: #28A745;
  --success-dim: rgba(40, 167, 69, 0.08);
  --warning: #E8913A;
  --warning-dim: rgba(232, 145, 58, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

  /* Shell band + proof canvas (Stages, 2026-09) */
  --walnut: #2B1F17;
  --walnut-2: #3A2B20;
  --walnut-ink: #F3E9DD;
  --walnut-ink-2: #C9B9A6;
  --amber: #E8913A;
  --amber-hover: #D5802E;
  --amber-deep: #B86A1F;
  --warn: #C98A1E;
  --ok: #3E8E5A;
  --surround: #D8D4CC;
  --ruler: #EDEAE4;
  --ruler-ink: #7A7368;
  --bleed-hatch: rgba(232, 145, 58, 0.55);
  --bleed-ground: rgba(232, 145, 58, 0.10);
  --safe-line: rgba(59, 130, 214, 0.75);
  --crop-mark: #6B6459;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --tier-epic-text: #A78BFA;    /* 6.5:1 on the dark panel */
  --on-accent: #1A1612;
  color-scheme: dark;

  /* Backgrounds */
  --bg: #12110F;
  --bg-primary: #12110F;
  --bg-secondary: #1C1A16;
  --bg-panel: #181613;
  --bg-input: #0D0C0A;
  --bg-elevated: #242018;
  --bg-tertiary: #2A2620;
  --bg-card: #1C1A17;
  --bg-card-hover: #242120;
  --bg-canvas: #12110F;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-hover-strong: rgba(255, 255, 255, 0.10);

  /* Accent (warm amber) */
  --accent: #E8913A;
  --accent-hover: #EDA355;
  --accent-glow: rgba(232, 145, 58, 0.15);
  --accent-dim: rgba(232, 145, 58, 0.08);
  --accent-bg: rgba(232, 145, 58, 0.12);
  --accent-light: #F0B060;

  /* Text */
  --text: #E8E4DE;
  --text-secondary: #CCC6BC;
  --text-muted: #B8B2A8;
  --text-dim: #908880;
  --accent-ink: #E8913A;
  --focus-ring: #E8913A;
  --border-input: #3A3428;

  /* Borders */
  --border: #3A3428;
  --border-subtle: #282318;
  --border-light: #3D3733;

  /* Feedback */
  --danger: #f0465a;
  --danger-dim: rgba(240, 70, 90, 0.12);
  --success: #34d68a;
  --success-dim: rgba(52, 214, 138, 0.15);
  --warning: #f5a623;
  --warning-dim: rgba(245, 166, 35, 0.10);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);

  /* Shell band + proof canvas (Stages, 2026-09) */
  --walnut: #0F0D0B;
  --walnut-2: #1A1612;
  --walnut-ink: #EFE6D8;
  --walnut-ink-2: #A69783;
  --amber: #F0A050;
  --amber-hover: #F5B36B;
  --amber-deep: #F5B36B;
  --warn: #E0A43C;
  --ok: #5FB37C;
  --surround: #2A2724;
  --ruler: #1F1C18;
  --ruler-ink: #8A8276;
  --bleed-hatch: rgba(240, 160, 80, 0.6);
  --bleed-ground: rgba(240, 160, 80, 0.12);
  --safe-line: rgba(91, 155, 230, 0.75);
  --crop-mark: #A69E92;
}