/* Giacobazzi — Design tokens (colori, tipografia, spaziature)
   Estratti 1:1 dal design system. Il tema gira in dark "teatro" di default. */
:root {
  /* ---- Brand base ---- */
  --crimson-900: #6e0417;
  --crimson-800: #8f0520;
  --crimson-700: #a80624;
  --crimson-600: #bd0728; /* primary brand red (logo) */
  --crimson-500: #d31736;
  --crimson-400: #e63c56;
  --crimson-300: #f26d81;

  --gold-600: #b9821f;
  --gold-500: #d29a2c;
  --gold-400: #e0aa36; /* brand gold (logo) */
  --gold-300: #ecc064;
  --gold-200: #f5d894;

  /* ---- Theatre neutrals (warm near-blacks) ---- */
  --ink-950: #0c0a0b; /* stage black — app background */
  --ink-900: #141112; /* raised surface */
  --ink-850: #1c1819; /* card surface */
  --ink-800: #262122; /* elevated card / input */
  --ink-700: #352f30; /* hairline borders */
  --ink-600: #4a4243;
  --ink-500: #6c6364;
  --ink-400: #948b8c;
  --ink-300: #bcb4b5;
  --ink-200: #ddd7d8;
  --ink-100: #efeaeb;
  --white: #ffffff;

  /* ---- Status ---- */
  --status-onsale: #3fae6a;
  --status-soldout: #d31736;
  --status-soon: #d29a2c;

  /* ---- Semantic aliases ---- */
  --bg-app: var(--ink-950);
  --bg-raised: var(--ink-900);
  --surface-card: var(--ink-850);
  --surface-elevated: var(--ink-800);
  --surface-sticky: rgba(12,10,11,0.82);

  --border-subtle: var(--ink-700);
  --border-strong: var(--ink-600);
  --border-gold: var(--gold-400);

  --text-strong: var(--white);
  --text-body: var(--ink-200);
  --text-muted: var(--ink-400);
  --text-inverse: var(--ink-950);

  --accent: var(--crimson-600);
  --accent-hover: var(--crimson-500);
  --accent-press: var(--crimson-700);
  --accent-gold: var(--gold-400);
  --accent-gold-hover: var(--gold-300);

  --focus-ring: var(--gold-400);
  --overlay-scrim: rgba(6,4,5,0.78);
  --hero-fade: var(--ink-950);

  /* ---- Type ---- */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-hero: clamp(3rem, 8vw, 6rem);
  --fs-display: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-heading: 1.15;
  --lh-body: 1.55;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.14em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.55);
  --shadow-gold-glow: 0 0 0 1px rgba(224,170,54,0.35), 0 8px 30px rgba(224,170,54,0.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --sticky-top: 72px;
}