/* ──────────────────────────────────────────────────────────────
   Tereso — Colors & Type tokens
   Financial-education streaming platform (It). Netflix-like shell
   over a warm editorial brand system.
   ────────────────────────────────────────────────────────────── */

/* Open Sauce One — primary brand face. Google Fonts equivalent is
   the real "Open Sauce One" on Fontshare / free for personal +
   commercial. Loaded here via Fontshare CDN. If this is not
   acceptable, supply TTFs in /fonts and swap the @font-face.       */
@import url("https://api.fontshare.com/v2/css?f[]=open-sauce-one@300,400,500,600,700,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ── Brand core ─────────────────────────────────────────── */
  --tereso-navy:        #1E3048;  /* rgb(30,48,72)   — primary ink / surfaces */
  --tereso-navy-deep:   #161455;  /* rgb(22,20,85)   — overlay / CTA darkening */
  --tereso-orange:      #FF8200;  /* rgb(255,130,0)  — primary accent */
  --tereso-orange-soft: #FFE3C7;  /* rgb(255,227,199)— orange-ring background */
  --tereso-blue-light:  #65AAEF;  /* rgb(101,170,239)— progress ring 2 */
  --tereso-blue-soft:   #C8D9EA;  /* rgb(200,217,234)— progress ring bg */
  --tereso-green:       #40B918;  /* rgb(64,185,24)  — chapter tag / success */
  --tereso-purple:      #8A38F5;  /* rgb(138,56,245) — rare stroke accent */
  --tereso-red:         #EC5865;  /* rgb(236,88,101) — error */

  /* ── Neutrals ───────────────────────────────────────────── */
  --tereso-paper:       #F2F3F4;  /* rgb(242,243,244) — app background */
  --tereso-paper-2:     #F7F7F7;
  --tereso-paper-3:     #FFFDFC;  /* warm white for cards */
  --tereso-fog:         #E8E8E8;
  --tereso-line:        #E9E9E9;
  --tereso-line-2:      #D9D9D9;
  --tereso-line-3:      #CECECE;
  --tereso-steel:       #ABABAB;  /* secondary text on light */
  --tereso-steel-2:     #8E8E93;  /* iOS-style secondary */
  --tereso-ink:         #222222;
  --tereso-ink-2:       #181D27;
  --tereso-black:       #000000;
  --tereso-white:       #FFFFFF;

  /* ── Semantic surface ───────────────────────────────────── */
  --bg:                 var(--tereso-paper);
  --bg-elevated:        var(--tereso-white);
  --bg-inverse:         var(--tereso-navy);
  --bg-cinema:          var(--tereso-black);        /* landing hero / player */

  /* ── Semantic ink ───────────────────────────────────────── */
  --fg:                 var(--tereso-navy);          /* headlines on light */
  --fg-2:               var(--tereso-ink-2);         /* body on light */
  --fg-3:               var(--tereso-steel);         /* tertiary on light */
  --fg-on-dark:         var(--tereso-white);
  --fg-on-dark-2:       rgba(255,255,255,0.72);
  --fg-on-dark-3:       rgba(255,255,255,0.5);
  --fg-link:            var(--tereso-orange);

  /* ── Semantic feedback ──────────────────────────────────── */
  --success:            var(--tereso-green);
  --warning:            var(--tereso-orange);
  --danger:             var(--tereso-red);
  --info:               var(--tereso-blue-light);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:          0 1px 2px rgba(0,0,0,0.06);
  --shadow-s:           0 4px 4px rgba(0,0,0,0.15);
  --shadow-m:           0 4px 18.6px 5px rgba(0,0,0,0.25);
  --shadow-l:           0 5.6px 26px 7px rgba(0,0,0,0.35);
  --shadow-hero:        0 -8px 50px 25px rgba(0,0,0,0.5);
  --shadow-card:        0 4px 4px rgba(0,0,0,0.30);
  --inner-highlight:    inset 0 4px 4px var(--tereso-paper);

  /* ── Radius — very generous, Tereso loves capsules ──────── */
  --r-xs:               4px;
  --r-s:                8px;
  --r-m:                12px;
  --r-l:                20px;       /* standard card */
  --r-xl:               30px;       /* pill field */
  --r-2xl:              36px;       /* search bar */
  --r-3xl:              42px;       /* mobile hero card */
  --r-cap:              140px;      /* big capsule blocks */
  --r-pill:             9999px;

  /* ── Spacing (4-pt grid) ────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(.22,.61,.36,1);
  --ease-in-out:        cubic-bezier(.65,0,.35,1);
  --dur-fast:           120ms;
  --dur-base:           220ms;
  --dur-slow:           420ms;

  /* ── Glass ──────────────────────────────────────────────── */
  --glass-bg:           rgba(255,255,255,0.40);
  --glass-bg-dark:      rgba(30,48,72,0.55);
  --glass-blur:         blur(35px);

  /* ── Type families ──────────────────────────────────────── */
  --font-sans:          "Open Sauce One", "Plus Jakarta Sans", "Inter",
                         system-ui, -apple-system, "Helvetica Neue", Arial,
                         sans-serif;
  --font-alt:           "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-num:           "Nunito", "Open Sauce One", system-ui, sans-serif;
  --font-ui:            "Inter", "Open Sauce One", system-ui, sans-serif;

  /* ── Type scale ─────────────────────────────────────────── */
  /* FIX-011: titoli con `clamp()` per resilienza mobile. Valori massimi DS
     pixel-perfect (desktop), minimi dimensionati per leggibilita' su 375px
     senza overflow. Tracking negativo gestito per-classe in `.t-h1`. */
  --size-display-xl:    clamp(48px, 6.2vw, 88px);  /* landing hero */
  --size-display:       clamp(36px, 5vw, 48px);    /* section hero */
  --size-h1:            clamp(32px, 5.2vw, 55px);  /* page title */
  --size-h2:            clamp(24px, 3vw, 35px);    /* section title */
  --size-h3:            clamp(20px, 2vw, 24.6px);  /* shelf title */
  --size-h4:            clamp(18px, 1.6vw, 20px);
  --size-lead:          24px;                       /* hero subcopy */
  --size-body-lg:       20.2px;
  --size-body:          18.5px;                     /* card body */
  --size-body-sm:       16px;
  --size-caption:       14px;
  --size-micro:         12px;

  --lh-tight:           100%;
  --lh-snug:            118%;
  --lh-normal:          133%;
  --lh-reading:         150%;

  --track-tight:        -1px;
  --track-normal:       0;
  --track-wide:         0.04em;
}

/* ── Semantic tags ─────────────────────────────────────────── */
.h1,
.t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}
.h2,
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-h2);
  line-height: var(--lh-tight);
  color: var(--fg);
}
.h3,
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-h3);
  line-height: 1.2;
  color: var(--fg);
}
.h4,
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-h4);
  line-height: 1.25;
  color: var(--fg);
}
.t-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-display);
  line-height: 1.1;
  color: var(--fg-on-dark);
}
.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-lead);
  line-height: 1.3;
  color: var(--fg-on-dark);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.33;
  color: var(--fg-2);
}
.t-card-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-body);
  line-height: 1.33;
  color: var(--fg);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-caption);
  line-height: 1.25;
  color: var(--fg-3);
}
.t-micro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-micro);
  line-height: 1.25;
}
.t-num {
  font-family: var(--font-num);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.t-link {
  color: var(--fg-link);
  text-decoration: none;
}

/* ── Base reset for previews ───────────────────────────────── */
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}