/* ============================================================
   Il Caffettino — Design Tokens
   Fonte di verità: Figma Desktop UI → Foundations (node 7:2)
   Nomi variabile 1:1 con le variabili Figma.
   Solo light mode.
   ============================================================ */

:root {
  /* ---------- Colore · Brand & neutri ---------- */
  --color-yellow: #ffe905;
  --color-grey: #e9e9e9;
  --color-dark: #17181d;
  --color-white: #ffffff;
  --color-grey-50: #f5f5f5;
  --color-grey-300: #c9c9cb;
  --color-grey-500: #8a8b90;

  /* ---------- Colore · Ruoli (variabili Figma) ---------- */
  --color-bg-canvas: #ffffff;
  --color-bg-subtle: #f5f5f5;
  --color-bg-muted: #e9e9e9;
  --color-bg-accent: #ffe905;
  --color-bg-inverse: #17181d;
  --color-bg-inverse-800: #2a2b31; /* superfici scure, input */
  --color-bg-inverse-700: #393a41; /* hover su dark, livelli */

  --color-text-primary: #17181d;
  --color-text-secondary: #8a8b90;
  --color-text-on-accent: #17181d;
  --color-text-on-inverse: #ffffff;

  --color-border-default: #e9e9e9;
  --color-border-strong: #17181d;

  --color-accent: #ffe905;

  /* ---------- Colore · Feedback ---------- */
  --color-feedback-error: #e04f4a;
  --color-feedback-error-subtle: #fbe9e8;
  --color-feedback-success: #2e9e5b;
  --color-feedback-success-subtle: #e7f4ec;

  /* ---------- Spacing · scala 4px ---------- */
  --sp-3xs: 4px;
  --sp-2xs: 8px;
  --sp-xs: 12px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;
  --sp-4xl: 128px;

  /* ---------- Raggi ---------- */
  --radius-none: 0;
  --radius-sm: 8px;   /* badge, chip piccoli */
  --radius-md: 12px;  /* input, card, media */
  --radius-lg: 20px;  /* box grandi */
  --radius-full: 999px; /* BOTTONI e chip */

  /* ---------- Effetti ---------- */
  /* Due strati: l'anello scuro garantisce il contrasto su fondo chiaro (il
     giallo al 40% su bianco compone 1,2:1, sotto il 3:1 di WCAG 1.4.11),
     l'alone giallo lo rende riconoscibile come accento del brand. */
  --focus-ring: 0 0 0 2px var(--color-bg, #fff), 0 0 0 4px var(--color-text-primary, #17181d), 0 0 0 7px rgba(255, 233, 5, 0.55);
  --focus-ring-inverse: 0 0 0 2px var(--color-dark, #17181d), 0 0 0 4px var(--color-accent, #ffe905);
  --shadow-soft: 0 28px 70px rgba(0, 0, 0, 0.22); /* card sollevate */
  --shadow-hairline: 0 6px 40px rgba(23, 23, 28, 0.02); /* card featured */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 5.556vw, 80px); /* 20 @360 → 80 @1440 */

  /* ============================================================
     Tipografia — Fustat
     Ramp fluida: mobile (Foundations Mobile) ↔ desktop (Foundations 7:2)
     interpolazione lineare 360→1440px via clamp()
     ============================================================ */
  --font-sans: 'Fustat', 'Fustat Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Display/Hero — EB · 40 → 96 · lh 98% · ls -2% */
  --fs-display-hero: clamp(2.5rem, 1.333rem + 5.185vw, 6rem);
  --lh-display-hero: 0.98;
  --ls-display-hero: -0.02em;

  /* Display — EB · 40 → 76 · lh 102%→100% · ls 0→-2% (ramp mobile vs desktop) */
  --fs-display: clamp(2.5rem, 1.75rem + 3.333vw, 4.75rem);
  --lh-display: 1.02;
  --ls-display: 0em;

  /* Display/Number — EB · 88 fisso (Figma: 88 sia mobile sia desktop) · lh 95% · ls -2% */
  --fs-display-number: 5.5rem;
  --lh-display-number: 0.95;
  --ls-display-number: -0.02em;

  /* H1 — EB · 32 → 64 · lh 106%→104% · ls -2% */
  --fs-h1: clamp(2rem, 1.333rem + 2.963vw, 4rem);
  --lh-h1: 1.06;
  --ls-h1: -0.02em;

  /* H2 — EB · 28 → 52 · lh 110%→106% · ls -1.5%→-2% */
  --fs-h2: clamp(1.75rem, 1.25rem + 2.222vw, 3.25rem);
  --lh-h2: 1.1;
  --ls-h2: -0.015em;

  /* H3 — EB · 24 → 40 · lh 116%→110% · ls -1%→-1.5% */
  --fs-h3: clamp(1.5rem, 1.167rem + 1.481vw, 2.5rem);
  --lh-h3: 1.16;
  --ls-h3: -0.01em;

  /* H4 — Bold · 20 → 30 · lh 124%→116% · ls -0.5%→-1% */
  --fs-h4: clamp(1.25rem, 1.042rem + 0.926vw, 1.875rem);
  --lh-h4: 1.24;
  --ls-h4: -0.005em;

  /* H5 — Bold · 20 → 24 · lh 124% · ls -0.5% */
  --fs-h5: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
  --lh-h5: 1.24;
  --ls-h5: -0.005em;

  /* H6 — Bold · 16 → 18 · lh 130% */
  --fs-h6: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --lh-h6: 1.3;

  /* Lead — Medium · 18 → 20 · lh 150% */
  --fs-lead: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
  --lh-lead: 1.5;

  /* Lead/Small — Medium · 16 → 18 · lh 150% */
  --fs-lead-sm: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --lh-lead-sm: 1.5;

  /* Body/Large — Regular · 16 → 18 · lh 172% */
  --fs-body-lg: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --lh-body-lg: 1.72;

  /* Body — Regular · 16 · lh 160% */
  --fs-body: 1rem;
  --lh-body: 1.6;

  /* Body/Medium — Medium · 15 · lh 150% */
  --fs-body-md: 0.9375rem;
  --lh-body-md: 1.5;

  /* Body/Small — Regular · 14 · lh 150% */
  --fs-body-sm: 0.875rem;
  --lh-body-sm: 1.5;

  /* Eyebrow — SemiBold · 12 · UPPER · ls 8% */
  --fs-eyebrow: 0.75rem;
  --lh-eyebrow: 1.2;
  --ls-eyebrow: 0.08em;

  /* Eyebrow/Small — SemiBold · 12 → 11 · UPPER · ls 8% */
  --fs-eyebrow-sm: clamp(0.6875rem, 0.771rem - 0.093vw, 0.75rem);
  --lh-eyebrow-sm: 1.2;
  --ls-eyebrow-sm: 0.08em;

  /* Label/Large — SemiBold · 16 → 15 · lh 130% (etichetta pulsante) */
  --fs-label-lg: clamp(0.9375rem, 1.021rem - 0.093vw, 1rem);
  --lh-label-lg: 1.3;

  /* Label — SemiBold · 13 · lh 130% */
  --fs-label: 0.8125rem;
  --lh-label: 1.3;

  /* Meta — Medium · 14 → 13 · lh 140% */
  --fs-meta: clamp(0.8125rem, 0.896rem - 0.093vw, 0.875rem);
  --lh-meta: 1.4;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 600ms;
  --dur-hover: 220ms;
}

/* Ramp desktop: line-height/letter-spacing dei titoli si stringono (Foundations 7:2) */
@media (min-width: 1024px) {
  :root {
    --lh-display: 1;
    --ls-display: -0.02em;
    --lh-h1: 1.04;
    --lh-h2: 1.06;
    --ls-h2: -0.02em;
    --lh-h3: 1.1;
    --ls-h3: -0.015em;
    --lh-h4: 1.16;
    --ls-h4: -0.01em;
  }
}