/* Shared design tokens — consumed by ficha.css, Mestre/mestre.css, Magia/grimorio.css, index.html.
   Single source of truth for color/type/spacing/radius/motion/z-index across all 4 surfaces.
   Breakpoints are documented here but must be repeated as literal px in each file's @media
   rules (CSS custom properties cannot be read inside a media query condition):
     --bp-sm: 600px   --bp-md: 840px   --bp-lg: 1080px */

:root {
  /* Neutral ramp — near-black, tinted warm (hue 30) to feel like one brand across sub-themes */
  --bg: oklch(12% 0.006 30);
  --panel: oklch(17% 0.007 30);
  --panel2: oklch(21% 0.008 30);
  --surface-3: oklch(26% 0.009 30);
  --line: oklch(30% 0.01 30);
  --line-strong: oklch(40% 0.013 30);
  --text: oklch(96% 0.004 30);
  --muted: oklch(74% 0.007 30);

  /* Brand accents — hue preserved from the pre-redesign palette */
  --red: oklch(58% 0.22 28);
  --red2: oklch(48% 0.19 27.6);
  --gold: oklch(77% 0.14 91);
  --bronze: oklch(66% 0.13 62);
  --bronze2: oklch(50% 0.11 61);
  --arcane: oklch(72% 0.15 265);
  --arcane2: oklch(58% 0.16 275);
  --blue: var(--arcane);

  /* Semantic */
  --ok: oklch(73% 0.17 150);
  --warn: oklch(82% 0.14 80.5);
  --bad: oklch(69% 0.2 24);

  /* Type */
  --font-ui: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-hero: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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