/* TopOne Red Chrome — design tokens
   Sampled from logo.jpg: black #000000, glossy red #DC0304 / #E0191D, chrome #D5D0D3, deep red #8D0202.
   Sampled from hero-app.jpg: maroon #3A050A / #4F1915, near-black #0A0507 / #170406, gold #CEB172. */
:root{
  /* primitives */
  --c-black:#050505;
  --c-ink-900:#0B0507;
  --c-maroon-950:#14060A;
  --c-maroon-900:#1E0A0F;
  --c-maroon-800:#2A0A10;
  --c-maroon-700:#3A0D16;
  --c-red-600:#B8000F;
  --c-red-500:#E3001B;
  --c-red-400:#FF2A3A;
  --c-chrome-100:#F4F5F7;
  --c-chrome-200:#D9DDE3;
  --c-gold-300:#F5CE6B;
  --c-gold-400:#E8B24A;
  --c-green-400:#4ADE80;
  --c-amber-400:#FBBF24;

  /* semantic roles */
  --bg:var(--c-ink-900);
  --bg-deep:var(--c-black);
  --surface:var(--c-maroon-900);
  --surface-2:var(--c-maroon-800);
  --surface-3:var(--c-maroon-700);
  --border:rgba(217,221,227,.12);
  --border-strong:rgba(217,221,227,.24);
  --text:#F2EEEF;
  --text-muted:#C9BFC2;
  --text-faint:#A69A9E;
  --heading:var(--c-chrome-100);
  --link:var(--c-gold-300);
  --link-hover:#FFE3A1;
  --cta:var(--c-red-500);
  --cta-text:#FFFFFF;
  --gold:var(--c-gold-300);
  --chrome:var(--c-chrome-200);
  --success:var(--c-green-400);
  --warning:var(--c-amber-400);
  --focus:var(--c-gold-300);

  /* gradients */
  --grad-cta:linear-gradient(180deg,#FF4A57 0%,var(--c-red-500) 45%,var(--c-red-600) 100%);
  --grad-chrome:linear-gradient(180deg,#FFFFFF 0%,#D9DDE3 45%,#9EA4AD 60%,#EEF0F3 100%);
  --grad-gold:linear-gradient(180deg,#FFE7A6 0%,var(--c-gold-300) 40%,var(--c-gold-400) 100%);
  --grad-page:radial-gradient(120% 60% at 50% 0%,#3A0D16 0%,var(--c-ink-900) 60%);
  --grad-surface:linear-gradient(180deg,var(--c-maroon-800),var(--c-maroon-900));

  /* typography */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-hi:"Noto Sans Devanagari","Mukta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:clamp(.8125rem,.79rem + .1vw,.875rem);
  --fs-sm:clamp(.9375rem,.91rem + .12vw,1rem);
  --fs-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-md:clamp(1.125rem,1.07rem + .25vw,1.25rem);
  --fs-lg:clamp(1.25rem,1.14rem + .5vw,1.5rem);
  --fs-xl:clamp(1.5rem,1.3rem + 1vw,2rem);
  --fs-2xl:clamp(1.75rem,1.45rem + 1.5vw,2.625rem);
  --fs-3xl:clamp(1.875rem,1.5rem + 2vw,3.25rem);
  --lh:1.6;
  --lh-hi:1.75;
  --lh-tight:1.2;

  /* 4px spacing scale */
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem;--s-6:1.5rem;
  --s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;

  /* radii, shadows */
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:26px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-cta:0 6px 18px rgba(227,0,27,.35),inset 0 1px 0 rgba(255,255,255,.35);
  --sh-gold:0 6px 22px rgba(232,178,74,.22);

  /* z-index */
  --z-header:50;--z-bar:60;--z-overlay:90;--z-drawer:100;--z-top:40;

  /* motion */
  --t-fast:120ms;--t-base:200ms;--t-slow:320ms;--ease:cubic-bezier(.2,.7,.2,1);

  /* layout / components */
  --container:1180px;
  --gutter:clamp(1rem,.8rem + 1vw,1.5rem);
  --header-h:56px;
  --bar-h:72px;
  --tap:48px;
  --btn-radius:var(--r-md);
  --card-bg:var(--grad-surface);
  --card-border:var(--border);
  --tile-w:clamp(112px,30vw,150px);
}