/* ==========================================================================
   FIRST PICK — Design Tokens
   --------------------------------------------------------------------------
   Tema unico: dark ("reliquia arcana" — navy profondo, oro metallico,
   cristallo viola). Ogni valore visivo della landing nasce da qui.

   Regole d'uso:
   - Nei componenti si usano SOLO i token semantici (--color-*, --text-*…),
     mai i primitivi (--navy-*, --gold-*…) e mai valori hard-coded.
   - L'arancione delle esplorazioni iniziali del logo è ESCLUSO dal brand.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ------------------------------------------------------------------
     1. PRIMITIVI — colore
     ------------------------------------------------------------------ */

  /* Navy — il "campo" del brand, dal fondo del logo */
  --navy-950: #070c16;
  --navy-900: #0b1120;
  --navy-800: #111a2e;
  --navy-700: #17233c;
  --navy-600: #22314f;
  --navy-500: #35486e;

  /* Oro — metallo, non giallo: dal bordo carte e dal wordmark "PICK" */
  --gold-200: #f0e2b8;
  --gold-300: #e7cd8c;
  --gold-400: #d9b96a;
  --gold-500: #c9a252;
  --gold-600: #a87f35;
  --gold-700: #7e5d22;

  /* Arcane — il cristallo viola del logo */
  --arcane-200: #c5bdf8;
  --arcane-300: #a79cf5;
  --arcane-400: #8b7ff0;
  --arcane-500: #6a5ae0;
  --arcane-600: #4f41be;
  --arcane-700: #383093;

  /* Avorio — bianco caldo del wordmark "FIRST" */
  --ivory-100: #f8f5ec;
  --ivory-200: #f2ede0;
  --ivory-300: #ddd8cc;

  /* Slate — neutri freddi per testo secondario su navy */
  --slate-300: #c3cadb;
  --slate-400: #a9b2c8;
  --slate-500: #7c87a0;

  /* ------------------------------------------------------------------
     2. SEMANTICI — colore
     ------------------------------------------------------------------ */

  /* Fondi e superfici */
  --color-bg: var(--navy-900);
  --color-bg-deep: var(--navy-950);
  --color-surface: var(--navy-800);
  --color-surface-raised: var(--navy-700);

  /* Bordi: il filo dorato è la firma del brand (come il bordo delle carte) */
  --color-border: rgb(201 162 82 / 0.18);
  --color-border-strong: rgb(201 162 82 / 0.38);
  --color-border-neutral: rgb(169 178 200 / 0.14);

  /* Testo */
  --color-text: var(--ivory-200);
  --color-text-muted: var(--slate-400);
  --color-text-faint: var(--slate-500);
  --color-heading: var(--ivory-100);

  /* Accenti */
  --color-accent: var(--gold-500);        /* oro: CTA, enfasi, prezzo/premio */
  --color-accent-bright: var(--gold-300); /* oro chiaro: hover, riflessi     */
  --color-on-accent: var(--navy-950);     /* testo sopra fondi oro           */
  --color-arcane: var(--arcane-500);      /* viola: la "magia", dati, grafici */
  --color-arcane-text: var(--arcane-300); /* viola leggibile per testo/link  */

  /* Link */
  --color-link: var(--arcane-300);
  --color-link-hover: var(--arcane-200);
  --color-link-underline: rgb(139 127 240 / 0.4);  /* arcane-400 in alpha */

  /* Velature e bordi arcani: derivati in alpha dei primitivi.
     I valori rgb() letterali vivono SOLO qui (i primitivi sono hex). */
  --color-accent-veil: rgb(201 162 82 / 0.08);     /* gold-500 in alpha   */
  --color-arcane-veil: rgb(106 90 224 / 0.12);     /* arcane-500 in alpha */
  --color-arcane-border: rgb(139 127 240 / 0.35);  /* arcane-400 in alpha */

  /* Stati */
  --color-focus-ring: var(--gold-400);
  --color-danger: #e0685e;
  --color-success: #5ec89a;

  /* ------------------------------------------------------------------
     3. GRADIENTI & LUCE
     ------------------------------------------------------------------ */

  /* Oro metallico: da usare su testo display (background-clip) e bordi */
  --gradient-gold: linear-gradient(
    115deg,
    var(--gold-600) 0%,
    var(--gold-300) 38%,
    var(--gold-200) 50%,
    var(--gold-400) 62%,
    var(--gold-700) 100%
  );

  /* Cristallo: sfaccettature del gemstone del logo */
  --gradient-crystal: linear-gradient(
    160deg,
    var(--arcane-300) 0%,
    var(--arcane-500) 45%,
    var(--arcane-700) 100%
  );

  /* Atmosfera di pagina: bagliore arcano in alto + vignettatura */
  --gradient-page:
    radial-gradient(58rem 34rem at 50% -12rem, rgb(106 90 224 / 0.16), transparent 68%),
    radial-gradient(80rem 48rem at 50% 118%, rgb(7 12 22 / 0.9), transparent 60%);

  /* Bagliori (box-shadow pronti) */
  --glow-gold: 0 0 0 1px rgb(201 162 82 / 0.25), 0 8px 32px rgb(201 162 82 / 0.16);
  --glow-crystal: 0 0 24px rgb(106 90 224 / 0.38), 0 0 64px rgb(106 90 224 / 0.18);
  --shadow-card: 0 1px 0 rgb(248 245 236 / 0.04) inset, 0 16px 40px rgb(4 7 14 / 0.55);

  /* ------------------------------------------------------------------
     4. TIPOGRAFIA
     ------------------------------------------------------------------
     Display: Cinzel (come il wordmark). Testo: Source Serif 4, alternativa
     libera a Plantin MT Pro. Cambiare famiglia = cambiare UNA variabile.
     ------------------------------------------------------------------ */

  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  /* Scala: fluida con clamp() da --text-display a --text-lead
     (min mobile ~360px → max desktop ~1280px); i corpi sono fissi in rem */
  --text-display: clamp(2.75rem, 1.5rem + 5.5vw, 5rem);      /* hero            */
  --text-h1: clamp(2.25rem, 1.35rem + 4vw, 3.5rem);
  --text-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  --text-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* sottotitoli     */
  --text-base: 1.0625rem;                                    /* corpo (17px)    */
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-overline: 0.8125rem;                                /* eyebrow/etichette */

  --leading-tight: 1.12;   /* display Cinzel        */
  --leading-snug: 1.3;     /* titoli h2/h3          */
  --leading-body: 1.65;    /* paragrafi             */

  --tracking-wide: 0.08em;   /* titoli Cinzel respirano con poco tracking  */
  --tracking-caps: 0.22em;   /* overline/etichette in maiuscolo            */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ------------------------------------------------------------------
     5. SPAZIO, FORMA, LAYOUT
     ------------------------------------------------------------------ */

  /* Scala 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Respiro tra sezioni della landing */
  --space-section: clamp(4.5rem, 12vh, 8rem);

  /* Raggi: la carta Magic è il riferimento (angoli morbidi ma sobri) */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-card: 1rem;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Layout */
  --container-max: 72rem;
  --container-narrow: 44rem;                     /* colonne di solo testo */
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* ------------------------------------------------------------------
     6. MOTION
     ------------------------------------------------------------------ */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* uscite morbide, "lusso" */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;   /* reveal di sezione */

  --transition-base: var(--duration-base) var(--ease-out);

  /* ------------------------------------------------------------------
     7. Z-INDEX
     ------------------------------------------------------------------ */

  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 1000;
}