/* ============================================================
   MONOLITH DESIGN SYSTEM — colors_and_type.css
   "The Mathematical Monolith"
   Cold, efficient, undeniably capable.
   ============================================================ */

/* JetBrains Mono — loaded from Google Fonts (canonical, not a substitution). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* Inter — local variable font, supports the full 100–900 weight range.
   We only ever use 400 and 700 in this system. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── Color: Surfaces ─────────────────────────────────────── */
  --surface-bg:        #0A0A0A;   /* Deep black — page background */
  --surface-elevated:  #141414;   /* Cards, panels, elevated chrome */
  --surface-inverse:   #FFFFFF;   /* For inverted blocks (rare) */

  /* ─── Color: Text ─────────────────────────────────────────── */
  --text-primary:      #FFFFFF;   /* Pure white — primary text */
  --text-secondary:    #E8E8E8;   /* Off-white — secondary copy */
  --text-tertiary:     rgba(232, 232, 232, 0.55); /* Muted labels */
  --text-disabled:     rgba(232, 232, 232, 0.30);

  /* ─── Color: Stroke ───────────────────────────────────────── */
  --stroke-subtle:     rgba(232, 232, 232, 0.30); /* Hairline dividers */
  --stroke-strong:     #FFFFFF;                   /* Borders on focus / interactive */
  --stroke-faint:      rgba(232, 232, 232, 0.12); /* Background grid lines */

  /* ─── Color: Inversion (light surfaces, used sparingly) ───── */
  --on-inverse-primary:   #0A0A0A;
  --on-inverse-secondary: #141414;

  /* ─── Status (monochrome — no chromatic semantic colors) ──── */
  --status-active:     #FFFFFF;
  --status-inactive:   rgba(232, 232, 232, 0.30);

  /* ─── Typography: Families ────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Typography: Weights (only two exist) ────────────────── */
  --weight-regular: 400;
  --weight-bold:    700;

  /* ─── Typography: Scale ───────────────────────────────────── */
  /* Modular ratio 1.333 (perfect fourth) — clinical, predictable. */
  --text-xs:   11px;   /* Mono micro-labels */
  --text-sm:   13px;   /* Mono labels, captions */
  --text-base: 15px;   /* Body */
  --text-md:   17px;   /* Lead body */
  --text-lg:   22px;   /* Sub-headings */
  --text-xl:   30px;   /* H3 */
  --text-2xl:  40px;   /* H2 */
  --text-3xl:  56px;   /* H1 */
  --text-4xl:  80px;   /* Display */
  --text-5xl:  112px;  /* Mega display */

  /* ─── Typography: Line Heights ────────────────────────────── */
  --leading-tight:   1.05;
  --leading-snug:    1.20;
  --leading-normal:  1.45;
  --leading-loose:   1.65;

  /* ─── Typography: Letter Spacing ──────────────────────────── */
  --tracking-tight:   -0.02em;   /* Display */
  --tracking-normal:   0em;
  --tracking-wide:    0.04em;    /* Mono labels */
  --tracking-wider:   0.10em;    /* Eyebrow / overline */
  --tracking-widest:  0.18em;    /* Section markers */

  /* ─── Spacing (8px base, with hairline 1px and 4px micro) ─── */
  --space-px:   1px;
  --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;
  --space-11:   192px;

  /* ─── Structure ───────────────────────────────────────────── */
  --radius-none: 0;            /* The only radius. */
  --border-hairline: 0.5px solid var(--stroke-subtle);
  --border-thin:     1px solid var(--stroke-strong);
  --shadow-none: none;         /* No shadows. Ever. */

  /* ─── Layout ──────────────────────────────────────────────── */
  --grid-gutter:    24px;
  --grid-columns:   12;
  --container-max:  1440px;
  --container-pad:  64px;
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

html, body {
  background: var(--surface-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0;
}

.display {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.display-mega {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.caption {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-tertiary);
}

/* ─── Mono — for technical labels, status, data, metadata ──── */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.mono-xs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--text-primary);
}

/* ─── Selection ─────────────────────────────────────────────── */
::selection {
  background: #FFFFFF;
  color: #0A0A0A;
}

/* ─── Focus ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 1px solid var(--stroke-strong);
  outline-offset: 2px;
}

/* ─── Hairline divider utility ──────────────────────────────── */
.hairline {
  border: 0;
  border-top: var(--border-hairline);
  margin: 0;
}