/* ============================================================
   BLOCK ZERO — COLOR & TYPE FOUNDATION
   ============================================================
   Strictly monochrome. Dark-default. No accent colors. No gradients.
   Hierarchy comes from weight and spacing, not color.
   ============================================================ */

/* Space Mono loaded from Google Fonts — no TTF provided */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* Space Grotesk — self-hosted TTFs supplied by brand */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- PALETTE (exact hex, no substitutes) ---- */
  --bg:             #0A0A0A;   /* background — near-black, not pure black */
  --fg:             #F5F0E8;   /* foreground — warm ivory, never pure white */
  --warm-grey:      #C8C0B8;   /* dividers, hover, focus borders */
  --mid-grey:       #8A8578;   /* secondary text, labels */
  --dim-grey:       #6B6560;   /* tertiary text, footer */
  --near-black:     #1A1A1A;   /* card surfaces, subtle elevation */

  /* ---- SEMANTIC COLOR ROLES ---- */
  --surface:        var(--bg);
  --surface-raised: var(--near-black);
  --fg-1:           var(--fg);          /* primary text, headings */
  --fg-2:           var(--warm-grey);   /* body text emphasis */
  --fg-3:           var(--mid-grey);    /* secondary text, labels, UI meta */
  --fg-4:           var(--dim-grey);    /* tertiary text, footer, disabled */
  --border:         var(--warm-grey);   /* strong divider, focused border */
  --border-dim:     #2A2823;            /* subtle divider on dark (derived) */
  --border-mid:     #3A3833;            /* mid-strength divider (derived) */

  /* ---- TYPE FAMILIES ---- */
  --font-sans:      'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:      'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- TYPE WEIGHTS ---- */
  --w-light:        300;
  --w-regular:      400;
  --w-medium:       500;
  --w-mono-regular: 400;
  --w-mono-bold:    700;

  /* ---- TYPE SCALE (clamped for fluidity) ---- */
  --fs-display:     clamp(48px, 6vw, 88px);   /* hero */
  --fs-h1:          clamp(36px, 4.5vw, 56px);
  --fs-h2:          clamp(28px, 3vw, 40px);
  --fs-h3:          20px;
  --fs-h4:          16px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-micro:       11px;

  /* ---- LINE HEIGHT ---- */
  --lh-tight:       1.05;
  --lh-heading:     1.15;
  --lh-body:        1.65;
  --lh-body-loose:  1.75;

  /* ---- LETTER SPACING ---- */
  --ls-display:     0.02em;
  --ls-heading:     0.15em;   /* allcaps headings */
  --ls-heading-sm:  0.1em;
  --ls-wordmark:    0.2em;    /* BLOCK ZERO lockup */
  --ls-body:        0;
  --ls-micro:       0.08em;   /* small caps labels */

  /* ---- SPACING (4px baseline) ---- */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  --space-10:       128px;

  /* ---- RADII (near-square, never pill) ---- */
  --radius-0:       0px;
  --radius-1:       2px;
  --radius-2:       4px;

  /* ---- BORDER WIDTHS ---- */
  --bw-hair:        1px;
  --bw-bold:        2px;

  /* ---- MOTION ---- */
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       400ms;
  --ease:           cubic-bezier(0.2, 0, 0, 1);

  /* ---- LAYOUT ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         32px;
}

/* ============================================================
   LIGHT MODE (inverse — for documents / specific contexts)
   ============================================================ */
[data-theme="light"] {
  --bg:             #F5F0E8;
  --fg:             #0A0A0A;
  --warm-grey:      #3A3833;
  --mid-grey:       #6B6560;
  --dim-grey:       #8A8578;
  --near-black:     #ECE6DC;
  --border-dim:     #D8D0C4;
  --border-mid:     #BEB6A8;
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- HEADINGS: ALL CAPS, wide tracking, light-to-medium weight ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-sm);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-sm);
}

.display {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: var(--fs-display);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

/* ---- BODY ---- */
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-loose); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }

/* ---- MONO / DATA / LABELS ---- */
code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
  font-weight: var(--w-mono-regular);
}

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading-sm);
  color: var(--fg-3);
  font-weight: var(--w-mono-regular);
}

.micro {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--fg-3);
}

/* ---- WORDMARK ---- */
.wordmark {
  font-family: var(--font-mono);
  font-weight: var(--w-mono-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  color: var(--fg-1);
}

/* ---- TABULAR / NUMERIC ---- */
.tabular, .data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-mono-regular);
}

/* ---- LINKS ---- */
a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-mid);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a:hover { border-bottom-color: var(--warm-grey); }

/* ---- SELECTION ---- */
::selection { background: var(--warm-grey); color: var(--bg); }