/**
 * DESIGN TOKENS — Super Duper Evil LLC
 * Dark luxury palette derived from the official logo: near-black ground,
 * gunmetal/graphite surfaces, off-white type, restrained ember-red accent.
 */
:root {
  /* ---- Color: base ---- */
  --color-void: #08080a;         /* page background */
  --color-obsidian: #0f0f13;     /* elevated surface */
  --color-charcoal: #17171c;     /* card / panel surface */
  --color-graphite: #232329;     /* borders, dividers */
  --color-gunmetal: #3a3a42;     /* secondary borders, disabled */

  /* ---- Color: type ---- */
  --color-ink: #f2efe9;          /* primary off-white text */
  --color-ash: #b8b4ac;          /* secondary text */
  --color-smoke: #7d7a76;        /* tertiary / muted text */

  /* ---- Color: accent ---- */
  --color-ember: #8a1f2b;        /* restrained crimson, primary accent */
  --color-ember-bright: #c23b3b; /* hover / interactive state */
  --color-ember-glow: rgba(194, 59, 59, 0.18); /* soft glow / focus rings */

  /* ---- Color: metallic highlight ---- */
  --color-silver: #c9c6bd;       /* metallic linework */

  /* ---- Type scale ---- */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --ls-wide: 0.08em;
  --ls-wider: 0.16em;
  --ls-widest: 0.28em;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px var(--color-ember-glow);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}