/* ============================================================
   NO-SIGN4L // colors_and_type.css
   SYS.FONT + SYS.COLOR foundations. Zero-color monochrome.
   Import this file, then use the semantic vars.
   ============================================================ */

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

:root {
  /* ---- TYPEFACES ----
     Martian Mono  : square, technical, variable weight. Display + UI labels. Always tracked out.
     Space Mono     : retro terminal body. Running text, code, captions. */
  --font-display: "Martian Mono", "Courier New", monospace;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* ---- GRAYSCALE RAMP (the only palette) ---- */
  --black:    #000000;  /* pure void — primary surface */
  --ink-950:  #050505;  /* panel base */
  --ink-900:  #0A0A0A;  /* raised panel / card */
  --ink-800:  #141414;  /* hover panel */
  --ink-700:  #1E1E1E;  /* hairline on black, dividers */
  --gray-600: #3A3A3A;  /* disabled stroke */
  --gray-500: #6E6E6E;  /* tertiary text / metadata */
  --gray-400: #9A9A9A;  /* secondary text on dark */
  --gray-300: #C4C4C4;  /* muted text on dark */
  --gray-200: #E0E0E0;  /* hairline on white */
  --gray-100: #F2F2F2;  /* off-white surface */
  --white:    #FFFFFF;  /* pure signal — inverse surface / primary text on dark */

  /* ---- SEMANTIC: default context is DARK (system offline screen) ---- */
  --bg:           var(--black);
  --surface:      var(--ink-900);
  --surface-2:    var(--ink-800);
  --fg1:          var(--white);     /* primary text */
  --fg2:          var(--gray-400);  /* secondary text */
  --fg3:          var(--gray-500);  /* tertiary / metadata / tiny labels */
  --line:         var(--ink-700);   /* hairline border */
  --line-strong:  var(--gray-600);
  --accent:       var(--white);     /* the brand has no color — "accent" is full-signal white */

  /* ---- BORDERS / RADII / ELEVATION ----
     Sharp rectangular construction. Radius is 0. No soft shadows. */
  --radius:       0px;
  --hair:         1px solid var(--line);
  --hair-strong:  1px solid var(--line-strong);
  --bracket:      2px;               /* corner-bracket stroke weight */
  /* "elevation" is expressed by inversion + hairline, never blur */
  --shadow-none:  none;

  /* ---- SPACING (4px base grid) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- TRACKING SCALE (terminal type is spaced out) ---- */
  --track-tight:  0.02em;
  --track:        0.12em;
  --track-wide:   0.28em;
  --track-mega:   0.5em;

  /* ---- MOTION: mechanical, no bounce ---- */
  --ease:        steps(1, end);      /* hard cuts where possible */
  --ease-smooth: cubic-bezier(.2,0,.2,1);
  --dur:         120ms;
}

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

.h0,  .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 0.92;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.p, p {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: var(--track-tight);
}
.small {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
/* tiny tracked-out system label — the connective tissue of the brand */
.label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg3);
}
.code, code, pre {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}