/* topone.fun — "Ruby" design tokens
   Primitive → semantic → component layers. Edit primitives only. */
:root{
  /* ── primitives ─────────────────────────────────────── */
  --garnet-950:#12050a; --garnet-900:#1a070d; --garnet-850:#230a12; --garnet-800:#2d0e18;
  --garnet-700:#3b1421; --garnet-600:#4d1a2b; --garnet-500:#63213a;
  --scarlet-700:#9e0f22; --scarlet-600:#c4122a; --scarlet-500:#e8142f; --scarlet-400:#ff3b52;
  --scarlet-300:#ff6d7e; --scarlet-200:#ffa3ad;
  --gold-700:#a87a12; --gold-600:#d19a1e; --gold-500:#f2b62a; --gold-400:#ffcc4d; --gold-200:#ffe7a3;
  --cream-50:#fff8f0; --cream-100:#f6ebe1; --cream-300:#dcc9bf; --cream-500:#b39a91; --cream-600:#8f7871;
  --mint-400:#34d399; --amber-400:#fbbf24; --live-500:#ff2d55;

  /* ── semantic roles ──────────────────────────────────── */
  --color-bg:var(--garnet-950);        --color-bg-alt:var(--garnet-900);
  --color-surface:var(--garnet-850);   --color-surface-2:var(--garnet-800);  --color-surface-3:var(--garnet-700);
  --color-border:rgba(255,204,77,.12); --color-border-strong:rgba(255,204,77,.28);
  --color-glass:rgba(35,10,18,.66);
  --color-accent:var(--scarlet-500);   --color-accent-strong:var(--scarlet-600);
  --color-accent-text:var(--scarlet-300);
  --color-cta:var(--gold-500);         --color-cta-hover:var(--gold-400);   --text-on-cta:#1a070d;
  --color-foil:linear-gradient(105deg,#ffe7a3 0%,#f2b62a 30%,#a87a12 50%,#ffe7a3 68%,#d19a1e 100%);
  --color-foil-red:linear-gradient(105deg,#ffa3ad 0%,#e8142f 40%,#ff6d7e 65%,#9e0f22 100%);
  --text-1:var(--cream-50); --text-2:var(--cream-100); --text-3:var(--cream-300); --text-4:var(--cream-500);
  --color-success:var(--mint-400); --color-warning:var(--amber-400); --color-error:var(--scarlet-400);
  --color-live:var(--live-500);
  /* filled scarlet surfaces use scarlet-600 so cream text keeps ≥4.5:1 */
  --color-fill-scarlet:var(--scarlet-600);

  /* ── typography ──────────────────────────────────────── */
  --font-display:"Oswald","Bebas Neue","Impact","Arial Narrow Bold","Helvetica Neue Condensed",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --fs-sm:clamp(.875rem,.84rem + .18vw,.9375rem);
  --fs-md:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-lg:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --fs-xl:clamp(1.375rem,1.2rem + .9vw,1.875rem);
  --fs-2xl:clamp(1.75rem,1.4rem + 1.8vw,2.625rem);
  --fs-3xl:clamp(2.25rem,1.6rem + 3.4vw,4rem);
  --lh-tight:1.1; --lh-snug:1.25; --lh-body:1.65;
  --track-wide:.08em; --track-caps:.14em;

  /* ── spacing (4px base) ──────────────────────────────── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-9:2.5rem; --space-10:3rem;
  --space-11:4rem; --space-12:5rem;
  --gutter:clamp(1rem,4vw,2rem);
  --measure:68ch;
  --wrap-max:75rem;

  /* ── radii ───────────────────────────────────────────── */
  --radius-sm:.375rem; --radius-md:.75rem; --radius-lg:1.25rem; --radius-pill:999px;

  /* ── elevation ───────────────────────────────────────── */
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 6px 18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --shadow-3:0 18px 44px rgba(0,0,0,.55);
  --glow-scarlet:0 0 0 1px rgba(232,20,47,.35),0 0 32px rgba(232,20,47,.35);
  --glow-gold:0 0 0 1px rgba(242,182,42,.45),0 0 28px rgba(242,182,42,.28);

  /* ── z-index ─────────────────────────────────────────── */
  --z-below:-1; --z-base:0; --z-raised:10; --z-sticky:100; --z-dock:150; --z-drawer:200;
  --z-overlay:300; --z-toast:400;

  /* ── motion ──────────────────────────────────────────── */
  --dur-fast:150ms; --dur-base:260ms; --dur-slow:520ms;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);

  /* ── layout signatures ───────────────────────────────── */
  --cut:clamp(14px,3.5vw,48px);       /* diagonal band edge (≈3–4°) */
  --notch:1.1rem;                     /* ticket-stub punch radius */
  --topbar-h:4.25rem; --dock-h:3.75rem;

  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}