/* ============================================================================
   CardCrow Design System — tokens (from the Claude Design console redesign).
   Concept: ink on aged dark paper. Warm-charcoal "card stock" ramp, gold-leaf
   accent, wax-seal red, and the five Magic mana colors. Everything skews warm;
   no pure grays, no pure black.
   Fonts (Spectral / IBM Plex Sans / IBM Plex Mono) load via Google Fonts
   <link> in index.html — no build step, drag-and-drop deployable as always.
   ============================================================================ */
:root {
  /* --- Card stock: warm-charcoal neutral ramp (backgrounds & surfaces) --- */
  --stock-950: #0b0a08;   /* app background, deepest */
  --stock-900: #100e0c;   /* sunken wells */
  --stock-880: #14120f;   /* app chrome / rails */
  --stock-850: #191612;   /* base surface */
  --stock-800: #1e1a16;   /* raised surface / card */
  --stock-750: #241f1a;   /* hover surface */
  --stock-700: #2b251f;   /* pressed / active surface */
  --stock-650: #342d25;   /* strong fill */

  /* --- Hairlines & borders --- */
  --line-soft: #26221c;
  --line:      #322c24;
  --line-strong: #443c31;

  /* --- Ink: warm off-white text ramp --- */
  --ink-50:  #f4efe6;
  --ink-200: #d8d1c4;
  --ink-300: #b3ab9c;
  --ink-400: #8b8375;
  --ink-500: #665f53;
  --ink-600: #4a453b;

  /* --- Gold leaf: primary accent --- */
  --gold-300: #e2c789;
  --gold-400: #d4b06e;
  --gold-500: #c6a15b;
  --gold-600: #a5823f;
  --gold-700: #7c6130;
  --gold-tint:      rgba(198, 161, 91, 0.13);
  --gold-tint-soft: rgba(198, 161, 91, 0.07);

  /* --- Wax seal: refined vermilion for destructive / alert --- */
  --seal-400: #d1685c;
  --seal-500: #bb4c40;
  --seal-600: #963a30;
  --seal-tint: rgba(187, 76, 64, 0.14);

  /* --- Semantic status --- */
  --success-400: #86b98f;
  --success-500: #6a9d73;
  --success-tint: rgba(106, 157, 115, 0.14);
  --warning-400: #d9a45c;
  --warning-500: #c2893f;
  --warning-tint: rgba(194, 137, 63, 0.14);
  --danger-400:  var(--seal-400);
  --danger-500:  var(--seal-500);
  --danger-tint: var(--seal-tint);
  --info-400:    #6ea3d8;
  --info-tint:   rgba(110, 163, 216, 0.14);

  /* --- Magic mana colors (WUBRG + C) --- */
  --mana-w: #e7dfca;
  --mana-u: #6ea3d8;
  --mana-b: #9a7cb8;   /* Black → violet, matches the app's black-as-purple */
  --mana-r: #d1685c;
  --mana-g: #6faf7a;
  --mana-c: #b4afa2;
  --mana-multi: var(--gold-500);
  --mana-land:  #a8895c;

  /* soft tints for category headers */
  --tint-w: rgba(231, 223, 202, 0.10);
  --tint-u: rgba(110, 163, 216, 0.12);
  --tint-b: rgba(154, 124, 184, 0.13);
  --tint-r: rgba(209, 104, 92, 0.13);
  --tint-g: rgba(111, 175, 122, 0.12);
  --tint-c: rgba(180, 175, 162, 0.11);
  --tint-multi: rgba(198, 161, 91, 0.12);
  --tint-land:  rgba(168, 137, 92, 0.13);

  /* --- Semantic aliases — components reference these, not raw ramps --- */
  --bg-app:          var(--stock-950);
  --bg-chrome:       var(--stock-880);
  --bg-well:         var(--stock-900);
  --surface:         var(--stock-850);
  --surface-raised:  var(--stock-800);
  --surface-hover:   var(--stock-750);
  --surface-active:  var(--stock-700);

  --border:          var(--line);
  --border-soft:     var(--line-soft);
  --border-strong:   var(--line-strong);

  --text-primary:    var(--ink-50);
  --text-secondary:  var(--ink-300);
  --text-muted:      var(--ink-400);
  --text-faint:      var(--ink-500);

  --accent:          var(--gold-500);
  --accent-hover:    var(--gold-400);
  --accent-strong:   var(--gold-300);
  --accent-tint:     var(--gold-tint);
  --on-accent:       #1a140a;

  --focus-ring:      var(--gold-400);
  --link:            var(--gold-400);
  --link-hover:      var(--gold-300);

  /* --- Typography --- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base: 0.875rem;
  --text-md:  0.9375rem;
  --text-lg:  1.0625rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.9375rem;
  --text-4xl: 2.5rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.09em;

  /* --- Spacing, radii, sizing (4px grid; tight specimen-label radii) --- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --control-sm: 30px;
  --control-md: 36px;
  --control-lg: 44px;

  --rail-width: 268px;
  --content-max: 1440px;
  --tap-min: 44px;

  /* --- Effects: elevation, edges, motion --- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.42);
  --shadow-lg:  0 14px 34px rgba(0,0,0,0.5);
  --shadow-xl:  0 28px 64px rgba(0,0,0,0.6);

  --edge-top: inset 0 1px 0 rgba(255,246,230,0.045);
  --edge-inset: inset 0 1px 0 rgba(255,246,230,0.05), inset 0 -1px 0 rgba(0,0,0,0.35);

  --ring: 0 0 0 2px var(--bg-app), 0 0 0 3.5px var(--gold-500);
  --ring-inset: inset 0 0 0 1px var(--gold-500);

  --elev-1: var(--edge-top), var(--shadow-sm);
  --elev-2: var(--edge-top), var(--shadow-md);
  --elev-3: var(--edge-top), var(--shadow-lg);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast: 90ms;
  --dur-base: 150ms;
  --dur-slow: 240ms;
}

/* ============================================================================
   Base reset & document defaults
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
p { margin: 0; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

button { font-family: inherit; }

::selection { background: var(--gold-tint); color: var(--ink-50); }

* { scrollbar-width: thin; scrollbar-color: var(--stock-700) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--stock-700);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--stock-650); }

.ff-mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}