/* theme.css | LM V002
   purpose: all design tokens (colours, fonts, sizes, spacing, ratios, motion); restyle the whole site here
   changelog: V002 --ar-card-k | V001 first version (dark theme, gold accent, red 485C + teal secondary) */
:root {
  /* colours */
  --c-bg: #0B0C0E;
  --c-surface: #15171A;
  --c-surface-2: #1D2024;
  --c-tile: #101215;
  --c-line: #2A2E34;
  --c-text: #F2F3F5;
  --c-silver: #A9AFB7;
  --c-muted: #8D949D;
  --c-gold: #C8A45A;
  --c-gold-soft: rgba(200, 164, 90, 0.45);
  --c-on-gold: #0B0C0E;
  --c-red: #DA291C;
  --c-on-red: #FFFFFF;
  --c-teal: #1FB5B0;
  --c-on-teal: #0B0C0E;
  --c-focus: #C8A45A;
  --c-error: #FF6B5E;
  --c-overlay: rgba(11, 12, 14, 0.72);
  --g-hero: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, rgba(11,12,14,0.15) 35%, rgba(11,12,14,0.25) 60%, rgba(11,12,14,0.92) 100%);
  --g-hero-short: linear-gradient(90deg, rgba(11,12,14,0.78) 0%, rgba(11,12,14,0.35) 60%, rgba(11,12,14,0.1) 100%), linear-gradient(180deg, rgba(11,12,14,0.2) 40%, rgba(11,12,14,0.95) 100%);
  --g-band: linear-gradient(90deg, rgba(11,12,14,0.88) 0%, rgba(11,12,14,0.55) 45%, rgba(11,12,14,0.1) 100%);
  --g-card: linear-gradient(180deg, rgba(11,12,14,0) 30%, rgba(11,12,14,0.9) 100%);

  /* fonts: system stack only, no external font calls */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-light: 300;
  --fw-bold: 700;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-hero: clamp(2.75rem, 1.6rem + 5.6vw, 6rem);
  --lh-tight: 1.05;
  --lh-body: 1.6;
  --ls-wide: 0.32em;
  --ls-kicker: 0.18em;

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* sizes */
  --maxw: 1280px;
  --maxw-text: 42rem;
  --header-h: 64px;
  --bar-h: 32px;
  --radius: 2px;
  --line: 1px;
  --tap: 44px;
  --tile-pad: clamp(0.5rem, 0.3rem + 1vw, 1rem);
  --drawer-w: min(420px, 100vw);
  --thumb-w: 72px;

  /* image ratios (one per slot type) */
  --ar-hero: 16 / 9;
  --ar-band: 21 / 9;
  --ar-card: 4 / 3;
  --ar-card-k: 1.3333; /* same ratio as one number, for size maths (lightbox) */
  --ar-teaser: 3 / 4;
  --ar-gallery: 3 / 2;
  --ar-portrait: 4 / 5;
  --ar-board: 3 / 2;

  /* motion */
  --t-fast: 150ms;
  --t-med: 260ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* layers */
  --z-header: 50;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 120;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}