/* ============================================================
   Design tokens — Sito Prof.ssa Giovanna Malara
   ------------------------------------------------------------
   Palette e scale da implementare a specchio nel tema WordPress
   (es. theme.json per block themes, o variabili CSS del child
   theme Astra/Kadence).
   ============================================================ */

:root {
  /* ---------- Colore ---------- */

  /* Navy / ink (testo, header, ombre) */
  --navy-900: #081a30;
  --navy-800: #0b2340;
  --navy-700: #14355c;
  --navy-500: #3c5678;
  --navy-300: #8ea0b9;
  --navy-100: #d5dde9;

  /* Teal (primary, CTA) */
  --teal-800: #0a5e6d;
  --teal-700: #0e7c8c;     /* PRIMARY */
  --teal-600: #1597ab;
  --teal-400: #5bb9c6;
  --teal-100: #d8ecef;
  --teal-50:  #ecf5f7;

  /* Ochre / warm accent */
  --ochre-700: #a3773d;
  --ochre-600: #b98a4a;    /* ACCENT */
  --ochre-400: #d4ab76;
  --ochre-100: #f3e6d1;

  /* Cream / paper warms */
  --cream-100: #faf5ec;    /* BACKGROUND SOFT */
  --cream-200: #f3ebd8;

  /* Neutrals */
  --white: #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f4;
  --gray-200: #dde1e8;
  --gray-400: #9aa3b2;
  --gray-600: #5c6573;
  --gray-800: #2c323d;

  /* Semantic */
  --text-primary: var(--navy-800);
  --text-secondary: var(--navy-500);
  --text-muted: var(--navy-300);
  --link: var(--teal-700);
  --link-hover: var(--teal-800);
  --bg-page: var(--white);
  --bg-soft: var(--cream-100);
  --bg-alt: var(--gray-50);
  --border: var(--gray-200);
  --border-strong: var(--navy-300);

  /* ---------- Tipografia ---------- */

  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scala tipografica — ratio 1.250 (major third), base 16px */
  --fs-12: 0.75rem;   /* 12 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-16: 1rem;      /* 16 — body */
  --fs-18: 1.125rem;  /* 18 — body large / lead */
  --fs-20: 1.25rem;   /* 20 */
  --fs-24: 1.5rem;    /* 24 — H4 */
  --fs-30: 1.875rem;  /* 30 — H3 */
  --fs-38: 2.375rem;  /* 38 — H2 */
  --fs-48: 3rem;      /* 48 — H1 */
  --fs-60: 3.75rem;   /* 60 — Hero display */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---------- Spacing (base 4px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 800px;     /* articolo / lettura lunga */
  --container-lg: 1100px;
  --container-xl: 1280px;    /* max page */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(8, 26, 48, 0.06), 0 1px 1px rgba(8, 26, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(8, 26, 48, 0.08), 0 1px 3px rgba(8, 26, 48, 0.06);
  --shadow-lg: 0 18px 40px rgba(8, 26, 48, 0.12), 0 4px 12px rgba(8, 26, 48, 0.05);
  --shadow-inset: inset 0 0 0 1px rgba(8, 26, 48, 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* ---------- Z-index ---------- */
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* Opzione dark mode (fuori scope per v.1, ma predisposta) */
@media (prefers-color-scheme: dark) {
  /* Non attivata nella v.1: il sito è solo light mode */
}