/* Marquee Holdings — brand tokens. Dark is the default theme; set data-theme="light" on <html> for paper mode. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root, [data-theme="dark"] {
  /* Brand constants */
  --ink: #0A0F1E;  --ink-800: #121A30;  --ink-700: #1B2644;
  --gold: #FFB627; --gold-300: #FFD27A;
  --paper: #FBF7EF; --paper-200: #F1EADB;

  /* Semantic */
  --surface-100: var(--ink);  --surface-200: var(--ink-800);  --surface-300: var(--ink-700);
  --text-100: var(--paper);   --text-200: #A7AFC4;            --text-300: #8D96B0;
  --border-subtle: #26324F;   --border-strong: #6B7694;
  --accent: var(--gold);      --accent-hover: var(--gold-300);
  --on-accent: var(--ink);    --accent-text: var(--gold);     --focus-ring: var(--gold);
  --success: #3DD598;         --error: #FF6B6B;               --info: #6EA8FF;
  --shadow-glow: 0 0 0 1px rgba(255,182,39,.35), 0 12px 40px rgba(255,182,39,.16);
  --spotlight: radial-gradient(60% 70% at 22% 38%, rgba(255,182,39,.16), rgba(255,182,39,0) 70%);
}

[data-theme="light"] {
  --surface-100: var(--paper); --surface-200: var(--paper-200); --surface-300: #E6DCC6;
  --text-100: var(--ink);      --text-200: #4A5470;             --text-300: #55607A;
  --border-subtle: #DDD2BA;    --border-strong: #727A91;
  --accent-hover: #E8A010;     --accent-text: #8A5A00;          --focus-ring: #8A5A00;
  --success: #097049;          --error: #C12A3A;                --info: #1E5BC6;
  --shadow-glow: 0 1px 2px rgba(10,15,30,.10), 0 12px 32px rgba(10,15,30,.12);
  --spotlight: radial-gradient(60% 70% at 22% 38%, rgba(255,182,39,.28), rgba(255,182,39,0) 70%);
}

:root {
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;   /* italic emphasis only */
  --font-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
}

body { background: var(--surface-100); color: var(--text-100); font: 400 16px/26px var(--font-sans); -webkit-font-smoothing: antialiased; }
.display-xl { font: 700 72px/72px var(--font-sans); letter-spacing: -.03em; }
.display-lg { font: 700 56px/58px var(--font-sans); letter-spacing: -.025em; }
.headline   { font: 700 36px/42px var(--font-sans); letter-spacing: -.02em; }
.title      { font: 600 24px/32px var(--font-sans); letter-spacing: -.01em; }
.body-lg    { font: 400 18px/28px var(--font-sans); }
.label      { font: 600 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.emphasis   { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-text); letter-spacing: -.01em; }
.btn        { font: 600 15px/1 var(--font-sans); padding: 14px 24px; border-radius: var(--radius-pill); border: 1.5px solid transparent; background: var(--accent); color: var(--on-accent); }
.btn:hover  { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text-100); border-color: var(--border-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (max-width: 720px) { .display-xl { font-size: 44px; line-height: 46px; } .display-lg { font-size: 38px; line-height: 42px; } .headline { font-size: 28px; line-height: 34px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }