/* ─────────────────────────────────────────────────────────────
   APERTIX · Design Tokens
   Editorial + technical. Cream / ink / rust / gold / slate.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@300;400;500;600&display=swap');

:root {
  /* ── Surfaces ─────────────────────────────── */
  --paper-50:  #F8F3E7;   /* lightest cream */
  --paper-100: #F2EBDD;   /* default cream  */
  --paper-200: #E8DFCB;   /* warm muted     */
  --paper-300: #D9CFB8;   /* divider on cream */

  --ink-900:   #0B0D10;   /* near-black, slight blue */
  --ink-800:   #14171C;
  --ink-700:   #1F2228;
  --ink-600:   #2A2E36;
  --ink-500:   #3A3F47;   /* slate */
  --ink-400:   #5A6068;
  --ink-300:   #7E848C;
  --ink-200:   #A8ADB3;
  --ink-100:   #C9CDD2;

  /* ── Accents ──────────────────────────────── */
  --rust-900:  #5A1F11;
  --rust-700:  #7C2D1A;   /* primary rust */
  --rust-500:  #A04528;
  --rust-300:  #C77657;

  --gold-700:  #9C7B3C;
  --gold-500:  #C8A45E;   /* primary gold */
  --gold-300:  #E0C892;

  /* Optional cool counterweight for diagrams only */
  --steel-500: #5A6F82;
  --steel-300: #8FA0B0;

  /* ── Semantic ─────────────────────────────── */
  --bg:               var(--paper-100);
  --bg-deep:          var(--ink-900);
  --fg:               var(--ink-900);
  --fg-on-deep:       var(--paper-50);
  --fg-muted:         var(--ink-400);
  --fg-muted-deep:    var(--ink-300);
  --rule:             rgba(11,13,16,0.12);
  --rule-deep:        rgba(248,243,231,0.14);
  --accent:           var(--rust-700);
  --accent-deep:      var(--gold-500);

  /* ── Type ─────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular, generous at the top) */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   32px;
  --t-3xl:   44px;
  --t-4xl:   64px;
  --t-5xl:   88px;
  --t-6xl:   124px;
  --t-7xl:   180px;

  /* Tracking */
  --track-tight:  -0.02em;
  --track-snug:   -0.01em;
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-eyebrow:0.14em;

  /* Leading */
  --lead-tight: 0.96;
  --lead-snug:  1.08;
  --lead-body:  1.55;
  --lead-loose: 1.7;

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

  /* ── Radii (used sparingly — brand prefers hairlines) ── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ── Motion ───────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur:        320ms;
  --dur-slow:   720ms;

  /* ── Layout ───────────────────────────────── */
  --gutter:   24px;
  --max-w:    1320px;
  --col-gap:  32px;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lead-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--rust-700); color: var(--paper-50); }

/* ── Utility type classes ─────────────────────────────── */
.display      { font-family: var(--font-display); font-weight: 400; line-height: var(--lead-tight); letter-spacing: var(--track-snug); }
.display-it   { font-family: var(--font-display); font-style: italic; font-weight: 400; line-height: var(--lead-tight); }
.sans         { font-family: var(--font-sans); }
.mono         { font-family: var(--font-mono); letter-spacing: 0; }
.eyebrow      { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }
.eyebrow-deep { color: var(--fg-muted-deep); }
.rule         { height: 1px; background: var(--rule); border: 0; }
.rule-deep    { height: 1px; background: var(--rule-deep); border: 0; }

/* Italic emphasis treatment — Apertix signature */
.it-em { font-family: var(--font-display); font-style: italic; color: var(--rust-700); font-weight: 400; }
.it-em--gold { color: var(--gold-500); }

/* Eyebrow with index numeral */
.eyebrow-idx { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.eyebrow-idx span:first-child { color: var(--accent); margin-right: 12px; }

/* Container */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0.02em;
  padding: 14px 22px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: currentColor; }
.btn:hover > * { color: var(--bg); }
.btn--solid-ink { background: var(--ink-900); color: var(--paper-50); border-color: var(--ink-900); }
.btn--solid-ink:hover { background: var(--ink-700); }
.btn--ghost-deep { color: var(--paper-50); }

/* Tabular numerals for data */
.tabular { font-variant-numeric: tabular-nums; }