/* Meridiana — tokens.css */

:root {
  /* Ink — primary text, never use #000 */
  --ink:              #0E0E0C;
  --ink-soft:         #2A2A26;
  --ink-quiet:        #6B6960;

  /* Paper — backgrounds, never use #FFF */
  --paper:            #FAF7F0;
  --paper-warm:       #F4EFE3;
  --paper-deep:       #ECE5D2;

  /* Macchia — primary brand green (Mediterranean scrubland) */
  --macchia:          #2D3B23;
  --macchia-deep:     #1A2515;
  --macchia-mid:      #4A5D3A;
  --macchia-pale:     #B8C2A5;

  /* Tirreno — secondary brand blue (Tyrrhenian sea) */
  --tirreno:          #1B3A4B;
  --tirreno-deep:     #0F2632;
  --tirreno-mid:      #3D5C70;
  --tirreno-pale:    #A9BCC8;

  /* Ochre — single warm accent, used sparingly */
  --ochre:            #A67C2E;
  --ochre-deep:       #7A5A1F;

  /* Stone — neutrals, rules, structure */
  --stone:            #D4CFC2;
  --stone-deep:       #A8A296;

  /* Type stacks */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-body:    "IBM Plex Sans", "Söhne", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;
  --space-10: 192px;
}

/* Base reset */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0a0a;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ───────── slide chrome ───────── */

deck-stage section {
  width: 1920px;
  height: 1080px;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  display: block;
}

/* page numbering / footer chrome */
.slide-meta {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
}
.slide-meta.tl { top: 56px; left: 128px; }
.slide-meta.tr { top: 56px; right: 128px; }
.slide-meta.bl { bottom: 56px; left: 128px; }
.slide-meta.br { bottom: 56px; right: 128px; }

/* hairline */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--stone);
  border: 0;
  margin: 0;
}
.rule-ochre { background: var(--ochre); }
.rule-paper-warm { background: rgba(244,239,227,0.35); }

/* sundial mark */
.mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
}

/* ───────── type ───────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--macchia);
  margin: 0;
}
.eyebrow-paper { color: var(--paper-warm); }

.display-xl {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--macchia);
  margin: 0;
  font-variation-settings: "opsz" 60;
}
.display-l {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--macchia);
  margin: 0;
  font-variation-settings: "opsz" 48;
}
.display-m {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--macchia);
  margin: 0;
  font-variation-settings: "opsz" 36;
}
.display-s {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--macchia);
  margin: 0;
  font-variation-settings: "opsz" 24;
}
.display-s.ink { color: var(--ink-soft); }

.body-l {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 70ch;
}
.body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 72ch;
}
.body-s {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-quiet);
  margin: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.caption {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--macchia-mid);
  margin: 0;
  max-width: 60ch;
}
.pull-attr {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 16px;
}

.callout-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  color: var(--ochre);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
}

/* utility */
.color-macchia { color: var(--macchia); }
.color-tirreno { color: var(--tirreno); }
.color-ochre   { color: var(--ochre); }
.color-paper-warm { color: var(--paper-warm); }
.color-paper-warm-soft { color: rgba(244,239,227,0.7); }
.italic { font-style: italic; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ───────── slide layout helpers ───────── */

.slide-pad {
  position: absolute;
  inset: 96px 128px;
}

.col-50 { width: calc((100% - 64px) / 2); }
.col-60 { width: calc((100% - 64px) * 0.6); }
.col-40 { width: calc((100% - 64px) * 0.4); }
.gutter-64 { gap: 64px; }

.row { display: flex; }
.col { display: flex; flex-direction: column; }

/* dashed em-dash bullets */
ul.dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.dash-list li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 18px 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 70ch;
}
ul.dash-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--macchia);
  font-family: var(--font-display);
  font-weight: 500;
}
ul.dash-list li b,
ul.dash-list li strong {
  font-weight: 600;
  color: var(--ink);
}

/* tables */
table.met {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  font-variant-numeric: tabular-nums;
}
table.met thead th {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-align: left;
  padding: 18px 16px;
  border-bottom: 1px solid var(--stone);
}
table.met tbody td {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  padding: 18px 16px;
  vertical-align: top;
  line-height: 1.45;
}
table.met tbody tr + tr td {
  border-top: 1px solid var(--stone);
}
table.met td.label {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--macchia);
  white-space: nowrap;
  width: 380px;
}
table.met td.fig {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--ochre);
  font-weight: 500;
}

/* ASCII / mono diagram block */
pre.ascii {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper-warm);
  padding: var(--space-5);
  margin: 0;
  white-space: pre;
}

/* dark slide variants */
.dark {
  background: var(--macchia-deep);
  color: var(--paper-warm);
}
.dark .display-xl,
.dark .display-l,
.dark .display-m,
.dark .display-s { color: var(--paper-warm); }
.dark .body, .dark .body-l, .dark .body-s, .dark .mono { color: var(--paper-warm); }
.dark .body-s { color: rgba(244,239,227,0.7); }
.dark .slide-meta { color: rgba(244,239,227,0.7); }
.dark .rule { background: rgba(244,239,227,0.2); }
.dark .eyebrow { color: var(--paper-warm); }

/* warm-paper variant */
.warm { background: var(--paper-warm); }

/* deep tirreno variant */
.tirreno-bg {
  background: var(--tirreno-deep);
  color: var(--paper-warm);
}
.tirreno-bg .display-xl,
.tirreno-bg .display-l,
.tirreno-bg .display-m,
.tirreno-bg .display-s { color: var(--paper-warm); }
.tirreno-bg .body, .tirreno-bg .body-l { color: var(--paper-warm); }