/* Emperor SDF — Figma design tokens (source of truth) */

:root {
  /* Core palette from Figma Home - 1 */
  --color-bg: #070d0f;
  --color-panel: #07100e;
  --color-panel-glass: rgba(7, 16, 14, 0.69);
  --color-border: #282619;
  --color-border-corner: #423F2A;
  --color-accent: #898f4a;
  --color-accent-soft: #d1d59e;
  --color-accent-muted: rgba(137, 143, 74, 0.22);
  --color-ink: #ffffff;
  --color-ink-muted: rgba(255, 255, 255, 0.78);
  --color-black: #000000;
  --color-gold-start: #997918;
  --color-gold-end: #d5b534;
  --color-gold-border: #8e6011;
  --color-silver-start: #7b7b7b;
  --color-silver-end: #cdcdcd;
  --color-silver-border: #9a9996;

  /* Typography */
  --font-display: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 40px;
  --text-hero: clamp(32px, 4vw, 54px);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-body: 26px;

  --tracking-display: -0.2px;
  --tracking-hero: -3px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-20: 80px;

  /* Layout — full-width, capped at 1920 */
  --container: 100%;
  --page-max: 1920px;
  --gutter: clamp(16px, 4vw, 80px);
  --header-height: 100px;
  --section-pad-y: 60px;
  --card-pad: 24px;
  --gap-tight: 8px;
  --gap-grid: 16px;
  --gap-stack: 16px;
  --gap-section: 16px;
  --grid-gap: var(--gap-grid);
  --content-max: 1760px;

  /* Motion — military taut, decisive */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-military: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --duration-loader: 900ms;

  /* Stacking: content < logo < header chips < menu < book < loader */
  --z-header: 100;
  --z-logo: 110;
  --z-nav: 140;
  --z-header-controls: 160;
  --z-book: 200;
  --z-loader: 250;
  --z-toast: 60;
}

:root,
html,
html.dark {
  color-scheme: dark;
}

.dark {
  color-scheme: dark;
}