/* ICLO — design tokens
   Fonte: ICLO Brand Manual v.1 2025 + Palette Colori Corsi
   Il blu #0e2050 (CMYK) è riservato alla stampa: non usarlo sul web. */

:root {
  /* Brand */
  --color-blue: #010670;
  --color-blue-dark: #01044f;
  --color-orange: #f7ab64;
  --color-ink: #2e2d2c;
  --color-grey: #91989c;

  /* Superfici */
  --color-white: #ffffff;
  --color-surface: #f1f2f7;       /* blu ICLO 6% su bianco */
  --color-surface-grey: #f2f3f3;  /* grigio ICLO 12% su bianco */
  --color-surface-lavender: #eceefb;
  --color-surface-map: #ecedf4;   /* blu ICLO 8% su bianco */
  --color-border: #dcdde7;
  --color-border-light: #eceef4;

  /* Testo */
  --color-text: var(--color-blue);
  --color-text-muted: rgba(1, 6, 112, 0.78);
  --color-text-soft: rgba(1, 6, 112, 0.55);
  --color-text-on-dark: rgba(255, 255, 255, 0.82);
  --color-border-on-dark: rgba(255, 255, 255, 0.22);

  /* Discipline corsi */
  --color-dentistry: #e8336e;
  --color-maxillo: #fddf4e;
  --color-osteopatia: #c1d052;
  --color-physiotherapy: #72bb6f;
  --color-neurosurgery: #f18616;
  --color-general-surgery: #e67ae2;
  --color-spinale: #00baa2;
  --color-plastic-surgery: #006cb5;
  --color-otolaryngology: #49bed8;
  --color-orthopedics: #91989c;

  /* Tipografia */
  --font-base: "Cera Pro", Arial, Helvetica, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-eyebrow: 0.656rem;   /* 10.5px */
  --fs-small: 0.813rem;     /* 13px */
  --fs-body: 0.938rem;      /* 15px */
  --fs-body-lg: 1.063rem;   /* 17px */
  --fs-lead: 1.188rem;      /* 19px */
  --fs-h4: 1.125rem;
  --fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 2.1vw, 2.125rem);
  --fs-h1: clamp(2.25rem, 1rem + 6.4vw, 8.25rem);
  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --fs-stat: clamp(3.5rem, 1.6rem + 6.4vw, 9.375rem);

  --lh-tight: 1.02;
  --lh-heading: 1.24;
  --lh-body: 1.7;
  --ls-eyebrow: 0.16em;
  --ls-wide: 0.2em;

  /* Spazio */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;
  --space-4xl: 7rem;

  --gutter: 1.25rem;
  --container-max: 90rem;   /* 1440px */
  --header-height: 4rem;

  /* Altro */
  --radius-none: 0;
  --radius-pill: 999px;
  --transition: 0.25s ease;
  --focus-ring: 2px solid var(--color-orange);
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --header-height: 5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 3.5rem;
    --header-height: 6.5rem;
  }
}