/* =========================================================
   Scolibro — Design Tokens
   Foundations: colors, type, spacing, radii, motion.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── BRAND COLORS ────────────────────────────────────── */
  /* Teal / Primary  ── studio · natura · risparmio */
  --teal-50:  #E1F5EE;
  --teal-100: #C5EBDA;
  --teal-200: #5DCAA5;
  --teal-300: #1D9E75;
  --teal-400: #168665;
  --teal-500: #0F6E56;   /* PRIMARY */
  --teal-600: #0B5F4B;
  --teal-700: #085041;
  --teal-900: #04342C;

  /* Blue / Info ── link, scambio, dati MIUR */
  --blue-50:  #E6F1FB;
  --blue-200: #85B7EB;
  --blue-300: #378ADD;
  --blue-500: #185FA5;
  --blue-700: #0C447C;
  --blue-900: #042C53;

  /* Amber / Warn ── stato libro "Ottimo", avvisi */
  --amber-50:  #FAEEDA;
  --amber-300: #EF9F27;
  --amber-500: #BA7517;
  --amber-700: #854F0B;
  --amber-900: #412402;

  /* Pink / Regalo ── solo annunci regalo */
  --pink-50:  #FBEAF0;
  --pink-300: #ED93B1;
  --pink-500: #D4537E;
  --pink-700: #993556;
  --pink-900: #4B1528;

  /* Gray / Neutral ── testo, bordi, sfondi */
  --gray-50:  #F7F6F2;
  --gray-100: #F1EFE8;
  --gray-200: #B4B2A9;
  --gray-300: #888780;
  --gray-500: #5F5E5A;
  --gray-700: #2C2C2A;
  --gray-900: #1A1A18;

  /* ── SEMANTIC: text ──────────────────────────────────── */
  --color-text-primary:    #2C2C2A;
  --color-text-secondary:  #5F5E5A;
  --color-text-tertiary:   #6E6D69;   /* era #888780 — scurito a 4.72:1 WCAG AA */
  --color-text-on-brand:   #E1F5EE;   /* su fill teal */
  --color-text-success:    #085041;
  --color-text-info:       #0C447C;
  --color-text-warning:    #854F0B;
  --color-text-danger:     #993556;
  --color-text-link:       #185FA5;

  /* ── SEMANTIC: backgrounds ───────────────────────────── */
  --color-background-primary:    #FFFFFF;
  --color-background-secondary:  #F7F6F2;   /* cards neutre, surface 0 */
  --color-background-tertiary:   #F1EFE8;   /* hover, raised */
  --color-background-success:    #E1F5EE;
  --color-background-info:       #E6F1FB;
  --color-background-warning:    #FAEEDA;
  --color-background-danger:     #FBEAF0;
  --color-background-scrim:      rgba(0, 0, 0, 0.4);

  /* ── SEMANTIC: borders ───────────────────────────────── */
  --color-border-primary:    rgba(15, 110, 86, 1);     /* teal-500 */
  --color-border-secondary:  rgba(44, 44, 42, 0.30);
  --color-border-tertiary:   rgba(44, 44, 42, 0.15);
  --color-border-success:    #5DCAA5;
  --color-border-info:       #85B7EB;
  --color-border-warning:    #EF9F27;
  --color-border-danger:     #ED93B1;

  /* ── TYPOGRAPHY ──────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-sans);

  /* role-based type tokens (size / line-height / weight) */
  --text-display-size:   22px;
  --text-display-lh:     1.2;
  --text-display-weight: 600;

  --text-h1-size:   18px;
  --text-h1-lh:     1.25;
  --text-h1-weight: 600;

  --text-h2-size:   15px;
  --text-h2-lh:     1.3;
  --text-h2-weight: 600;

  --text-body-size:   13px;
  --text-body-lh:     1.45;
  --text-body-weight: 400;

  --text-caption-size:   11px;
  --text-caption-lh:     1.4;
  --text-caption-weight: 400;

  --text-mono-size: 11px;

  /* ── SPACING (4px scale) ─────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── RADII ───────────────────────────────────────────── */
  --border-radius-xs:   2px;
  --border-radius-sm:   6px;
  --border-radius-md:   8px;     /* button, input default */
  --border-radius-lg:  12px;     /* card */
  --border-radius-xl:  16px;     /* modal */
  --border-radius-2xl: 20px;     /* sheet, phone frame */
  --border-radius-pill: 999px;

  /* ── BORDER STORY (no shadow system) ─────────────────── */
  --border-thin:  0.5px;
  --border-focus: 1.5px;

  /* ── MOTION ──────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-out:      cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-INDEX ─────────────────────────────────────────── */
  --z-bottom-nav: 50;
  --z-sticky:    100;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* =========================================================
   ROLE-LEVEL TYPE STYLES
   Use these classes (or compose the tokens) to get correct
   leading + tracking + weight without re-declaring sizes.
   ========================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  font-weight: var(--text-display-weight);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.t-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  font-weight: var(--text-h1-weight);
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
}

.t-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: var(--text-h2-weight);
  color: var(--color-text-primary);
}

.t-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--text-body-weight);
  color: var(--color-text-primary);
}

.t-caption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  font-weight: var(--text-caption-weight);
  color: var(--color-text-secondary);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-size);
  color: var(--color-text-tertiary);
}

.t-link {
  color: var(--color-text-link);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
}
.t-link:hover { color: var(--blue-700); }

/* Section/eyebrow label used across the system */
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}