/* ============================================================
   OTO FITNESS — TYPOGRAPHY
   Font, scale, pesi e stili tipografici globali
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,700;0,800;0,900;1,300&family=Barlow:wght@300;400;500&family=Cormorant+Garamond:ital,wght@1,300;1,400&display=swap');

   /* ── VARIABILI ── */
   :root {
     color-scheme: light;
     --font-display: 'Barlow Condensed', sans-serif;
     --font-body:    'Barlow', sans-serif;
     --font-serif:   'Cormorant Garamond', serif;

     /* Scala tipografica */
     --text-xs:   10px;
     --text-sm:   12px;
     --text-base: 15px;
     --text-lg:   18px;
     --text-xl:   24px;
     --text-2xl:  clamp(32px, 4vw, 48px);
     --text-3xl:  clamp(48px, 6vw, 72px);
     --text-4xl:  clamp(64px, 9vw, 120px);
     --text-5xl:  clamp(80px, 13vw, 180px);

     /* Colori */
     --color-black:  #0e0e0e;
     --color-dark:   #333333;
     --color-mid:    #999990;
     --color-light:  #e8e8e5;
     --color-off:    #f5f5f3;
     --color-white:  #ffffff;

     /* Spaziature */
     --space-xs:   8px;
     --space-sm:   16px;
     --space-md:   32px;
     --space-lg:   64px;
     --space-xl:   100px;
     --space-2xl:  160px;

     /* Transizioni */
     --transition: 0.25s ease;
     --transition-slow: 0.5s ease;
   }

   /* ── BASE ── */
   body {
     font-family: var(--font-body);
     font-size: var(--text-base);
     font-weight: 300;
     line-height: 1.85;
     color: var(--color-black);
     background: var(--color-white);
   }

   /* ── DISPLAY (titoli grandi) ── */
   .t-display {
     font-family: var(--font-display);
     font-size: var(--text-5xl);
     font-weight: 900;
     line-height: 0.85;
     letter-spacing: -4px;
     text-transform: uppercase;
   }

   .t-headline {
     font-family: var(--font-display);
     font-size: var(--text-4xl);
     font-weight: 800;
     line-height: 0.88;
     letter-spacing: -2px;
     text-transform: uppercase;
   }

   .t-title {
     font-family: var(--font-display);
     font-size: var(--text-3xl);
     font-weight: 700;
     line-height: 0.92;
     letter-spacing: -1px;
     text-transform: uppercase;
   }

   /* ── SERIF ITALIC (accenti) ── */
   .t-serif {
     font-family: var(--font-serif);
     font-size: var(--text-3xl);
     font-weight: 300;
     font-style: italic;
     line-height: 1.1;
     letter-spacing: 0;
   }

   /* ── BODY ── */
   .t-body {
     font-family: var(--font-body);
     font-size: var(--text-base);
     font-weight: 300;
     line-height: 1.9;
     color: #666;
   }

   /* ── LABEL / EYEBROW ── */
   .t-label {
     font-family: var(--font-display);
     font-size: var(--text-xs);
     font-weight: 400;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--color-mid);
   }

   /* ── HELPER: testo bianco ── */
   .t-white  { color: var(--color-white); }
   .t-muted  { color: var(--color-mid); }
   .t-dark   { color: var(--color-dark); }

   /* ── MOBILE: riduce letter-spacing aggressivo ── */
   @media (max-width: 768px) {
     .t-display  { letter-spacing: -1px; }
     .t-headline { letter-spacing: -1px; }
     .t-title    { letter-spacing: 0; }
   }