/* ============================================================
   Mondo che ruota — Design Tokens
   Colors, type, spacing, radii. Import this file once.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: ink (dark surfaces) ---------- */
  --ink:      #0B0D10;   /* primary background */
  --ink-2:    #13161B;   /* elevated surface */
  --ink-3:    #1E2229;   /* secondary elevation, dividers */
  --ink-4:    #2A2F38;   /* hover surface */

  /* ---------- Color: bone (foreground on dark) ---------- */
  --bone:     #F2EDE3;   /* primary text */
  --bone-2:   #C9C2B4;   /* secondary text */
  --bone-3:   #7C7669;   /* tertiary, muted */
  --bone-4:   #4A463E;   /* very low contrast */

  /* ---------- Color: warm accents ---------- */
  --terra:        #2C7BE5;  /* primary accent — azzurro primario */
  --terra-deep:   #1A5AB0;  /* terra hover/press */
  --terra-soft:   #2E77D2;  /* azzurro chiaro */
  --ochre:        #2FA3B8;  /* secondary warm */
  --alba:         #A9C9E3;  /* dawn pink */

  /* ---------- Semantic colors ---------- */
  --bg:           var(--ink);
  --bg-elev:      var(--ink-2);
  --bg-elev-2:    var(--ink-3);
  --fg:           var(--bone);
  --fg-muted:     var(--bone-2);
  --fg-subtle:    var(--bone-3);
  --accent:       var(--terra);
  --accent-hover: var(--terra-deep);
  --border:       var(--ink-3);
  --border-strong:var(--ink-4);
  --link:         var(--terra);

  /* ---------- States ---------- */
  --success: #6B8E5A;
  --warning: #D9A441;
  --error:   #C44536;

  /* ---------- Type: families ---------- */
  --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale ---------- */
  --fs-display-1: clamp(3.5rem, 7vw, 6rem);
  --fs-display-2: clamp(2.5rem, 4.5vw, 4rem);
  --fs-h1:        2.5rem;     /* 40 */
  --fs-h2:        1.875rem;   /* 30 */
  --fs-h3:        1.375rem;   /* 22 */
  --fs-h4:        1.125rem;   /* 18 */
  --fs-body:      1.0625rem;  /* 17 */
  --fs-small:     0.875rem;   /* 14 */
  --fs-xs:        0.75rem;    /* 12 */

  /* ---------- Type: leading ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Type: tracking ---------- */
  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-eyebrow:   0.12em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-7:    32px;
  --s-8:    40px;
  --s-9:    48px;
  --s-10:   64px;
  --s-11:   80px;
  --s-12:   96px;
  --s-13:   128px;
  --s-14:   160px;

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ---------- Layout ---------- */
  --container:    1280px;
  --gutter:       80px;
  --gutter-sm:    24px;
  --nav-h:        64px;

  /* ---------- Motion ---------- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     180ms;
  --dur:          320ms;
  --dur-slow:     600ms;
}

/* ============================================================
   Base elements — semantic application of tokens
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display-1, .display-2 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

.display-1 {
  font-size: var(--fs-display-1);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-variation-settings: "opsz" 144;
}
.display-2 {
  font-size: var(--fs-display-2);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-variation-settings: "opsz" 96;
}

h1 { font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-normal); font-family: var(--font-sans); letter-spacing: var(--tr-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-normal); font-family: var(--font-sans); }

p, li { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); }
.small  { font-size: var(--fs-small); }
.xs     { font-size: var(--fs-xs); }
.muted  { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-muted);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.95em; }
code { color: var(--terra-soft); background: var(--ink-2); padding: 0.1em 0.4em; border-radius: var(--r-sm); }

::selection { background: var(--terra); color: var(--ink); }

/* Italic Fraunces SOFT: editorial pull-quote */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--bone);
  font-variation-settings: "SOFT" 100, "opsz" 96;
}

/* Numbers — tabular */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }