/* ============================================================
   CARELLI & BUSSOLA — Design Tokens
   Concessionaria Ufficiale Honda · Pisa
   Honda-compliant palette + cinematic neutrals
   ============================================================ */

:root {
  /* --- Honda core (compliant / vincolanti) --- */
  --honda-red: #cc0000;   /* brand — solo accenti / Il Filo Rosso, NON sui bottoni */
  --cta-red:   #E61832;   /* bottoni / CTA — regola Honda: diverso dal rosso brand */
  --cta-red-hi:#ff2f47;
  --white:     #ffffff;
  --black:     #000000;

  /* --- Neutri estesi (profondità cinematografica) --- */
  --ink-900: #0A0A0B;   /* fondo cinematico */
  --ink-850: #0e0e10;
  --ink-800: #141416;   /* superfici scure */
  --ink-700: #1c1c1f;
  --ink-600: #26262b;
  --paper:   #F4F4F2;   /* testo su scuro (bianco caldo) */
  --paper-bg:#FAFAF8;   /* fondo chiaro */
  --paper-2: #f0efea;
  --muted:   #9A9A9E;   /* testo secondario */
  --muted-d: #6b6b70;   /* secondario su chiaro */
  --line:    rgba(255, 255, 255, 0.08);  /* hairline su scuro */
  --line-d:  rgba(10, 10, 11, 0.10);      /* hairline su chiaro */
  --line-str:rgba(255, 255, 255, 0.16);

  /* --- Tipografia --- */
  --font-display: "Hanken Grotesk", "Sharp Grotesk", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;

  /* Scala cinematic (clamp responsive) */
  --fs-display: clamp(2.75rem, 6.2vw, 6rem);
  --fs-h1:      clamp(2rem, 4.4vw, 3.75rem);
  --fs-h2:      clamp(1.65rem, 3vw, 2.85rem);
  --fs-h3:      clamp(1.2rem, 1.8vw, 1.6rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-cap:     0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* --- Spazio (respiro cinematico) --- */
  --space-section: clamp(6rem, 12vh, 11rem);
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1320px;
  --maxw-text: 62ch;

  /* --- Motion (house) --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);     /* out-expo morbido */
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-micro: 0.26s;
  --dur-mid: 0.7s;
  --dur-lg: 0.9s;

  /* --- Forma --- */
  --radius: 14px;
  --radius-lg: 22px;
  --bar-h: 80px;      /* barra di navigazione */
  --promo-h: 42px;    /* promo bar "Promozioni in corso" */
  --header-h: var(--bar-h); /* totale header fisso (promo inclusa via body.has-promo) */

  --shadow-card: 0 30px 60px -28px rgba(0,0,0,0.55);
  --shadow-float: 0 40px 90px -40px rgba(0,0,0,0.7);
}

@media (max-width: 720px) {
  :root { --bar-h: 66px; --promo-h: 38px; }
}