/* ──────────────────────────────────────────────────────────────
   Lemmatica — colors_and_type.css
   Notte Arancio: blu notte profondo, arancio segnale, carta neutra.
   Geist (display + UI) + Geist Mono (dati, riferimenti normativi).
   ────────────────────────────────────────────────────────────── */

/* Geist + Geist Mono self-hosted (variable, 100–900 + italic) from fonts/. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Notte Arancio palette (default) ────────────────────── */
  --ink:      #0B1B3A;  /* Atramentum · blu notte profondo */
  --paper:    #F4F5F8;  /* Charta     · primary surface, neutra */
  --stone:    #D8DDE6;  /* Lapis      · alt surfaces, hairlines */
  --aurum:    #FF6A1A;  /* Signum     · arancio segnale, accento, CTA */
  --smoke:    #5A6478;  /* Fumus      · secondary text, dividers */
  --bone:     #FAFBFD;  /* Os         · reverse text on ink */

  /* ── Functional / status ────────────────────────────────── */
  --info:     #2563EB;
  --critical: #DC2626;
  --ok:       #1F8A5B;

  /* ── Aurum scale (9-step tint→shade, arancio) ───────────── */
  --aurum-100: #FCDFCB;
  --aurum-200: #FCC8A4;
  --aurum-300: #FBB07E;
  --aurum-400: #FB9957;
  --aurum-500: #FF6A1A;   /* base · = --aurum */
  --aurum-600: #D45617;
  --aurum-700: #9F4213;
  --aurum-800: #6A2D0E;
  --aurum-900: #361708;

  /* ── Semantic surface tokens ────────────────────────────── */
  --bg:           var(--paper);
  --bg-elev:      var(--bone);
  --bg-card:      #FFFFFF;
  --bg-input:     var(--stone);
  --fg:           var(--ink);
  --fg-muted:     var(--smoke);
  --fg-dim:       rgba(11, 27, 58, 0.55);
  --fg-faint:     rgba(11, 27, 58, 0.35);
  --border:       rgba(11, 27, 58, 0.10);
  --border-strong:rgba(11, 27, 58, 0.18);
  --border-soft:  rgba(11, 27, 58, 0.06);
  --accent:       var(--aurum);
  --accent-soft:  rgba(255, 106, 26, 0.10);

  /* ── Type families ──────────────────────────────────────── */
  --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;

  /* ── Type scale tokens (sizes, weights, tracking, line-h) ─ */
  /* Display */
  --t-display-size:    56px;
  --t-display-weight:  500;
  --t-display-ls:      -0.035em;
  --t-display-lh:      1;

  /* Headings */
  --t-h1-size: 40px;  --t-h1-weight: 500;  --t-h1-ls: -0.03em;   --t-h1-lh: 1.05;
  --t-h2-size: 28px;  --t-h2-weight: 500;  --t-h2-ls: -0.02em;   --t-h2-lh: 1.15;
  --t-h3-size: 20px;  --t-h3-weight: 500;  --t-h3-ls: -0.01em;   --t-h3-lh: 1.2;

  /* Body */
  --t-body-l-size: 17px; --t-body-l-weight: 400; --t-body-l-ls: -0.005em; --t-body-l-lh: 1.5;
  --t-body-size:   15px; --t-body-weight:   400; --t-body-ls:    0;       --t-body-lh:   1.5;

  /* Data / mono */
  --t-mono-size:    14px; --t-mono-weight:    500; --t-mono-ls:    0.02em; --t-mono-lh:    1.5;

  /* Caption / kicker */
  --t-caption-size: 11px; --t-caption-weight: 500; --t-caption-ls: 0.22em; --t-caption-lh: 1.4;

  /* ── Radii (low; brand is squared) ──────────────────────── */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;
  --radius-xl: 12px;
  --radius-tile: 34px;       /* app icon tile */

  /* ── Shadows (sparse, soft, ink-based) ──────────────────── */
  --shadow-sm: 0 1px 2px rgba(11, 27, 58, 0.04);
  --shadow:    0 4px 16px rgba(11, 27, 58, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 27, 58, 0.12);

  /* ── Spacing scale (4px base) ───────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Layout chrome ──────────────────────────────────────── */
  --sidebar-w: 224px;
  --topbar-h:  52px;
}

/* ───────────────────────────────────────────────────────────
   Base reset + body
   ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* ───────────────────────────────────────────────────────────
   Semantic type classes
   ─────────────────────────────────────────────────────────── */
.t-display, h1.display {
  font: var(--t-display-weight) var(--t-display-size)/var(--t-display-lh) var(--font-sans);
  letter-spacing: var(--t-display-ls);
  margin: 0;
}
h1, .t-h1 {
  font: var(--t-h1-weight) var(--t-h1-size)/var(--t-h1-lh) var(--font-sans);
  letter-spacing: var(--t-h1-ls);
  margin: 0;
}
h2, .t-h2 {
  font: var(--t-h2-weight) var(--t-h2-size)/var(--t-h2-lh) var(--font-sans);
  letter-spacing: var(--t-h2-ls);
  margin: 0;
}
h3, .t-h3 {
  font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-lh) var(--font-sans);
  letter-spacing: var(--t-h3-ls);
  margin: 0;
}
.t-body-l, p.body-l {
  font: var(--t-body-l-weight) var(--t-body-l-size)/var(--t-body-l-lh) var(--font-sans);
  letter-spacing: var(--t-body-l-ls);
}
.t-body, p {
  font: var(--t-body-weight) var(--t-body-size)/var(--t-body-lh) var(--font-sans);
  letter-spacing: var(--t-body-ls);
  margin: 0 0 var(--sp-3);
}
.t-mono, code, .mono {
  font: var(--t-mono-weight) var(--t-mono-size)/var(--t-mono-lh) var(--font-mono);
  letter-spacing: var(--t-mono-ls);
}
.t-caption, .kicker {
  font: var(--t-caption-weight) var(--t-caption-size)/var(--t-caption-lh) var(--font-mono);
  letter-spacing: var(--t-caption-ls);
  text-transform: uppercase;
  color: var(--smoke);
}

/* Aurum dot/accent helpers used on logos */
.aurum   { color: var(--aurum); }
.muted   { color: var(--fg-muted); }
.dim     { color: var(--fg-dim); }
.on-ink  { background: var(--ink); color: var(--bone); }
.on-aurum{ background: var(--aurum); color: var(--bone); }
.on-paper{ background: var(--paper); color: var(--ink); }

/* Hairline divider — brand uses .5px ink at 12% opacity */
.hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--sp-4) 0;
}