/* ============================================================
   Odontoiatria Sempione Roma (OSR) — Colors & Type foundation
   Base: design system export (colors_and_type.css) + token che nel
   design vivevano solo inline (petrolio, rosa, mono).
   Brand brief: linee morbide e stondate · colori tenui ·
   bianco e pulizia predominanti · gerarchie ordinate · stile "vetro"
   ============================================================ */

/* Self-hosted Montserrat (variable) + IBM Plex Mono — nessuna CDN esterna */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-italic-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand core ---- */
  --osr-teal:        #356D72;  /* primary — fills, headings, CTAs */
  --osr-mint:        #D7F8F4;  /* secondary — light surfaces, on-teal text */
  --osr-white:       #FFFFFF;

  /* ---- Token inline del design ---- */
  --osr-petrolio:    #194142;  /* pannelli scuri */
  --osr-rosa:        #E7A9B8;  /* accent Medicina estetica (override da admin) */
  --osr-rosa-scuro:  #B76B7E;
  --osr-rosa-chiaro: #FBE9EE;

  /* ---- Teal scale (derived, harmonious) ---- */
  --teal-900: #1F4145;
  --teal-700: #2A595E;
  --teal-600: #356D72;   /* = --osr-teal */
  --teal-500: #4A858A;
  --teal-300: #8FB6B9;
  --teal-200: #B6D0D5;
  --teal-100: #D7E7E9;

  /* ---- Cool accents ---- */
  --cyan-bright: #51B3DA;
  --cyan:        #80D0E1;
  --cyan-pale:   #C7E9F4;
  --cyan-mist:   #CFEAEE;
  --cyan-haze:   #EAF6F8;
  --blue-pale:   #E8F2FB;
  --blue-mist:   #DDF0F6;

  /* ---- Neutrals ---- */
  --ink:        #0D0D0D;
  --slate:      #768BA0;
  --surface:    #FFFFFF;
  --surface-2:  #ECEEEE;
  --surface-3:  #F5F8F8;
  --hairline:   #E2E8E8;

  /* ---- Semantic colors ---- */
  --fg-1: var(--ink);
  --fg-2: #34474B;
  --fg-3: var(--slate);
  --fg-on-teal:  var(--osr-mint);
  --fg-on-mint:  var(--osr-teal);
  --accent:      var(--osr-teal);
  --accent-soft: var(--osr-mint);

  /* ---- Type families ---- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type scale (Montserrat) ---- */
  --display-size: clamp(40px, 5vw, 72px);
  --display-weight: 300;
  --display-tracking: 0.06em;
  --display-leading: 1.04;

  --h1-size: clamp(34px, 3.6vw, 48px);
  --h1-weight: 700;
  --h1-tracking: 0.02em;
  --h1-leading: 1.08;

  --h2-size: clamp(26px, 2.6vw, 36px);
  --h2-weight: 600;
  --h2-tracking: 0.01em;
  --h2-leading: 1.15;

  --h3-size: 24px;
  --h3-weight: 600;
  --h3-tracking: 0;
  --h3-leading: 1.25;

  --lead-size: 22px;
  --lead-weight: 600;
  --lead-leading: 1.35;

  --body-size: 18px;
  --body-weight: 400;
  --body-leading: 1.6;

  --small-size: 15px;
  --small-weight: 500;

  --label-size: 16px;
  --label-weight: 500;
  --label-tracking: 0.10em;

  --eyebrow-size: 13px;
  --eyebrow-weight: 600;
  --eyebrow-tracking: 0.16em;

  /* ---- Radii — "linee morbide e stondate" ---- */
  --r-pill:   999px;
  --r-card:   28px;
  --r-panel:  40px;
  --r-sm:     14px;

  /* ---- Shadows ---- */
  --shadow-btn:   2px 4px 4px rgba(0,0,0,0.25);
  --shadow-card:  0 18px 50px -22px rgba(31,65,69,0.28);
  --shadow-soft:  0 8px 24px -12px rgba(31,65,69,0.20);

  /* ---- Glass ("stile vetro") ---- */
  --glass-fill:   rgba(255,255,255,0.10);
  --glass-fill-2: rgba(255,255,255,0.55);
  --glass-blur:   blur(10px);
  --glass-border: 1px solid rgba(255,255,255,0.55);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
}

/* ---- Classi tipografiche di base ---- */

.osr-display {
  font-family: var(--font-sans);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--osr-teal);
}

.osr-h1 {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  color: var(--fg-1);
}

.osr-h2 {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--fg-1);
}

.osr-h3 {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--fg-1);
}

.osr-lead {
  font-family: var(--font-sans);
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-leading);
  color: var(--osr-teal);
}

.osr-body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--fg-2);
}

.osr-small {
  font-family: var(--font-sans);
  font-size: var(--small-size);
  font-weight: var(--small-weight);
  color: var(--fg-3);
}

.osr-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
}

.osr-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--osr-teal);
}

.osr-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}