/* =========================================================
   REMNANT · Design Tokens
   Source of truth: /README.md
   ========================================================= */

/* Fonts — Google Fonts stand-ins for the licensed brand faces.
   Swap with the licensed files for production. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Archivo:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- Color ---------- */
  /* Neutrals */
  --rem-obsidian:  #1A1A1A;
  --rem-linen:     #F0EEEA;

  /* Brand Darks */
  --rem-abyss:     #0A2C2C;
  --rem-deep-teal: #0D5C5C;
  --rem-forest:    #1A7A6E;

  /* Brand Lights */
  --rem-teal:      #2EA896;
  --rem-sage:      #5BC8B8;

  /* Semantic roles */
  --rem-bg:         var(--rem-linen);
  --rem-surface:    #FFFFFF;
  --rem-ink:        var(--rem-obsidian);
  --rem-ink-muted:  #4A4A4A;
  --rem-ink-subtle: #7A7A7A;
  --rem-hairline:   rgba(26,26,26,.12);
  --rem-hairline-inverse: rgba(240,238,234,.14);

  /* Brand accents (use sparingly) */
  --rem-accent:     var(--rem-deep-teal);
  --rem-accent-hi:  var(--rem-sage);

  /* ---------- Type ---------- */
  --rem-font-display: 'Space Grotesk', 'Helios', ui-sans-serif, system-ui, sans-serif;  /* Display / wordmark */
  --rem-font-sub:     'Archivo', 'Aileron', ui-sans-serif, system-ui, sans-serif;        /* Subheads / labels */
  --rem-font-body:    'Manrope', 'Garet', ui-sans-serif, system-ui, sans-serif;          /* Body / UI */

  /* Scale (1.25 — major third, restrained) */
  --rem-display: clamp(56px, 7.2vw, 104px);
  --rem-h1:      clamp(40px, 4.6vw, 64px);
  --rem-h2:      clamp(30px, 3.2vw, 44px);
  --rem-sub:     18px;
  --rem-body:    16px;
  --rem-caption: 13px;
  --rem-micro:   11px;

  /* Tracking */
  --rem-track-display: -0.02em;   /* tight on big display */
  --rem-track-sub:      0.14em;   /* loose on uppercase labels */
  --rem-track-micro:    0.2em;

  /* Leading */
  --rem-lh-display: 0.92;
  --rem-lh-heading: 1.05;
  --rem-lh-body:    1.55;

  /* ---------- Spacing (8pt grid) ---------- */
  --rem-s-1:  4px;
  --rem-s-2:  8px;
  --rem-s-3: 12px;
  --rem-s-4: 16px;
  --rem-s-5: 24px;
  --rem-s-6: 32px;
  --rem-s-7: 48px;
  --rem-s-8: 64px;
  --rem-s-9: 96px;
  --rem-s-10:128px;

  /* ---------- Radii ---------- */
  --rem-r-0:  0px;      /* default — Remnant leans architectural */
  --rem-r-1:  2px;
  --rem-r-2:  4px;
  --rem-r-pill: 999px;

  /* ---------- Hairline rule ---------- */
  --rem-rule:  1px solid var(--rem-hairline);
  --rem-rule-inverse: 1px solid var(--rem-hairline-inverse);

  /* ---------- Motion ---------- */
  --rem-ease:  cubic-bezier(.2,.7,.2,1);
  --rem-dur:   220ms;
}

/* ---------- Base reset (optional, scoped via .rem) ---------- */
.rem, .rem * { box-sizing: border-box; }
.rem {
  background: var(--rem-bg);
  color: var(--rem-ink);
  font-family: var(--rem-font-body);
  font-size: var(--rem-body);
  line-height: var(--rem-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type primitives ---------- */
.rem-display {
  font-family: var(--rem-font-display);
  font-size: var(--rem-display);
  font-weight: 600;
  line-height: var(--rem-lh-display);
  letter-spacing: var(--rem-track-display);
}
.rem-h1 {
  font-family: var(--rem-font-display);
  font-size: var(--rem-h1);
  font-weight: 600;
  line-height: var(--rem-lh-heading);
  letter-spacing: -0.015em;
}
.rem-h2 {
  font-family: var(--rem-font-display);
  font-size: var(--rem-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rem-sub {
  font-family: var(--rem-font-sub);
  font-size: var(--rem-sub);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--rem-track-sub);
  text-transform: uppercase;
}
.rem-body {
  font-family: var(--rem-font-body);
  font-size: var(--rem-body);
  font-weight: 400;
  line-height: var(--rem-lh-body);
  color: var(--rem-ink);
}
.rem-caption {
  font-family: var(--rem-font-body);
  font-size: var(--rem-caption);
  font-weight: 500;
  line-height: 1.4;
  color: var(--rem-ink-muted);
}
.rem-eyebrow {
  font-family: var(--rem-font-sub);
  font-size: var(--rem-micro);
  font-weight: 700;
  letter-spacing: var(--rem-track-micro);
  text-transform: uppercase;
  color: var(--rem-ink-subtle);
}

/* ---------- Wordmark ---------- */
.rem-wordmark {
  font-family: var(--rem-font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.rem-wordmark::after {
  content: ".";
  /* The period is load-bearing — it's the signature. */
  color: currentColor;
}