/* =========================================================
   Warden — design tokens
   "Stealth dossier. CRT terminal someone left on overnight."
   Every color picks a rung on the ink ramp. No accents.
   ========================================================= */

/* =========================================================
   Local fonts.
   Three families, one job each:
   - Geist Mono  → operator contexts (default for product UI)
   - Geist       → long-form prose, marketing body
   - GeistPixel  → display-only, brand moments (5 texture variants)
   ========================================================= */

/* Geist Mono — operator default */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist Mono";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* Geist (Sans) — long-form prose, marketing body */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* GeistPixel — display-only brand moments. Five texture variants.
   Use exactly one per surface. Never mix two pixel styles on the
   same page. Reserved for hero lockups, posters, event marks. */
@font-face {
  font-family: "GeistPixel Square";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/GeistPixel-Square.ttf") format("truetype");
}
@font-face {
  font-family: "GeistPixel Circle";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/GeistPixel-Circle.ttf") format("truetype");
}
@font-face {
  font-family: "GeistPixel Grid";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/GeistPixel-Grid.ttf") format("truetype");
}
@font-face {
  font-family: "GeistPixel Line";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/GeistPixel-Line.ttf") format("truetype");
}
@font-face {
  font-family: "GeistPixel Triangle";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/GeistPixel-Triangle.ttf") format("truetype");
}

/* Local Geist (sans) variable fonts — opt‑in only, see --w-sans below. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* GeistPixel display family — five decorative variants. Each is a separate
   font-family because the variants are distinct glyph systems, not weights.
   Use sparingly for hero marks, large numerals, decorative dossier-stamp
   moments. Never for body or chrome. */
@font-face {
  font-family: "Geist Pixel Triangle";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GeistPixel-Triangle.ttf") format("truetype");
}
@font-face {
  font-family: "Geist Pixel Square";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GeistPixel-Square.ttf") format("truetype");
}
@font-face {
  font-family: "Geist Pixel Line";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GeistPixel-Line.ttf") format("truetype");
}
@font-face {
  font-family: "Geist Pixel Grid";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GeistPixel-Grid.ttf") format("truetype");
}
@font-face {
  font-family: "Geist Pixel Circle";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/GeistPixel-Circle.ttf") format("truetype");
}

:root {
  /* ---------- Ground ---------- */
  --w-void: #0a0a0a;        /* page ground — Vercel dark bg, pure neutral */

  /* ---------- Ink ramp (4 rungs) ---------- */
  --w-ink-1: #ededed;       /* primary text, display */
  --w-ink-2: #a1a1a1;       /* secondary text, labels */
  --w-ink-3: #666666;       /* tertiary text, muted meta, micro-labels */
  --w-ink-4: #262626;       /* edge lines, dividers between zones */

  /* ---------- Hairlines ---------- */
  --w-hair:  #1a1a1a;       /* internal hairlines inside zones */
  --w-edge:  #262626;       /* edge lines between zones (same as ink-4) */

  /* ---------- Surface states ----------
     Operator console occasionally needs a "heavier than void" surface
     for hover/selection. Stay on the ramp — no tints. */
  --w-surface-0: #0a0a0a;   /* = void */
  --w-surface-1: #111111;   /* hover, subtle wash */
  --w-surface-2: #161616;   /* selected row, modal panel */

  /* ---------- CRT scanline (use as background-image) ---------- */
  --w-scanline: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  ); /* @kind other */

  /* ---------- Type ----------
     Three families, one job each. Pick deliberately:
       --w-sans  → the default (product UI, prose, headings, chrome, labels)
       --w-mono  → reserved for genuinely monospaced contexts (code, IDs,
                   ULIDs, hashes, timestamps, paths, IPs, tabular data)
       --w-pixel → display-only display moments (hero lockup, poster mark)
     If a surface is uncertain, sans wins. Mono is the exception, not the
     ground state — reach for it only when fixed-width glyphs do real work. */
  --w-mono:  "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; /* @kind font */
  --w-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* @kind font */

  /* GeistPixel — five texture variants. Default to Square (most legible). */
  --w-pixel:           "GeistPixel Square", "Geist Mono", ui-monospace, monospace; /* @kind font */
  --w-pixel-square:    "GeistPixel Square", "Geist Mono", ui-monospace, monospace; /* @kind font */
  --w-pixel-circle:    "GeistPixel Circle", "Geist Mono", ui-monospace, monospace; /* @kind font */
  --w-pixel-grid:      "GeistPixel Grid", "Geist Mono", ui-monospace, monospace; /* @kind font */
  --w-pixel-line:      "GeistPixel Line", "Geist Mono", ui-monospace, monospace; /* @kind font */
  --w-pixel-triangle:  "GeistPixel Triangle", "Geist Mono", ui-monospace, monospace; /* @kind font */

  /* Sans is the default. Geist (sans) carries body, headings, chrome, labels,
     and prose everywhere. Mono is the opt-in family now — reach for --w-mono
     only when fixed-width glyphs do real work (code, IDs, timestamps, tabular
     data). Keep structured data in mono even inside a sans surface; that is
     the one place the two families intentionally sit side by side. */
  --w-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* @kind font */

  /* Decorative pixel display — five variants. Each is its own glyph system,
     not a weight. Use for hero marks, large stamped numerals, or a single
     dossier-style decorative moment. Never for body, never for chrome,
     never below 24px. */
  --w-pixel-triangle: "Geist Pixel Triangle", "Geist Mono", monospace; /* @kind font */
  --w-pixel-square:   "Geist Pixel Square",   "Geist Mono", monospace; /* @kind font */
  --w-pixel-line:     "Geist Pixel Line",     "Geist Mono", monospace; /* @kind font */
  --w-pixel-grid:     "Geist Pixel Grid",     "Geist Mono", monospace; /* @kind font */
  --w-pixel-circle:   "Geist Pixel Circle",   "Geist Mono", monospace; /* @kind font */

  /* font sizes — three roles only */
  --w-fs-display:    64px;  /* hero lockup */
  --w-fs-display-sm: 42px;  /* hero lockup, compact viewport */
  --w-fs-h1:         32px;  /* section header on dense screens */
  --w-fs-h2:         22px;  /* sub-section */
  --w-fs-body-lg:    18px;  /* tagline body */
  --w-fs-body:       14px;  /* default body */
  --w-fs-body-sm:    13px;  /* secondary body */
  --w-fs-meta:       11px;  /* footer meta, ticker text */
  --w-fs-micro:      9.5px; /* uppercase form-field labels */

  /* tracking */
  --w-track-display: -0.02em;
  --w-track-body:    0.01em;
  --w-track-meta:    0.06em;
  --w-track-micro:   0.22em;

  /* weights */
  --w-w-light:   300; /* @kind other */
  --w-w-regular: 400; /* @kind other */
  --w-w-medium:  500; /* @kind other */
  --w-w-bold:    600; /* @kind other */

  /* ---------- Spacing (vertical rhythm) ---------- */
  --w-s-1: 4px;
  --w-s-2: 8px;
  --w-s-3: 12px;
  --w-s-4: 16px;
  --w-s-5: 20px;
  --w-s-6: 28px;   /* tight section gap */
  --w-s-7: 40px;
  --w-s-8: 48px;   /* generous section gap */
  --w-s-9: 64px;

  /* layout */
  --w-col: 560px;  /* single-column width for marketing */

  /* ---------- shadcn blend ----------
     Warden is flat, but interactive chrome borrows a *hint* of shadcn:
     a 2px radius on inputs/buttons/popovers, a 1px ink-1 focus ring.
     Surfaces, cards, rows, modals stay sharp-cornered. The radius is
     barely perceptible — its only job is to keep clickable elements
     from looking pasted onto the page. */
  --w-radius:    2px;   /* inputs, buttons, chips, popovers */
  --w-radius-lg: 3px;   /* command palette, larger overlays */
  --w-ring: 0 0 0 1px var(--w-ink-1);   /* focus ring — no glow, no blue */

  /* ---------- Motion ----------
     Two animations only. Both diegetic.
     1. caret blink — hard on/off, no easing
     2. (reserved) — live-state pulse if/when a real signal needs it */
  --w-blink-dur: 1s; /* @kind other */
}

/* =========================================================
   Semantic element styles
   ========================================================= */
html, body {
  margin: 0;
  padding: 0;
  background: var(--w-void);
  color: var(--w-ink-1);
  font-family: var(--w-sans);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Display: 64/0.95/-0.02em/500 */
.w-display {
  font-family: var(--w-sans);
  font-weight: var(--w-w-medium);
  font-size: var(--w-fs-display);
  line-height: 0.95;
  letter-spacing: var(--w-track-display);
  color: var(--w-ink-1);
  margin: 0;
}

/* Body roles */
.w-body-lg { font-size: var(--w-fs-body-lg); line-height: 1.4; color: var(--w-ink-1); }
.w-body    { font-size: var(--w-fs-body);    line-height: 1.55; color: var(--w-ink-1); }
.w-body-sm { font-size: var(--w-fs-body-sm); line-height: 1.6;  color: var(--w-ink-2); }
.w-muted   { color: var(--w-ink-3); }

/* Micro-label — form-field-on-government-document */
.w-micro {
  font-size: var(--w-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--w-track-micro);
  color: var(--w-ink-2);
  font-weight: var(--w-w-regular);
}

/* Meta — ticker / footer */
.w-meta {
  font-size: var(--w-fs-meta);
  letter-spacing: var(--w-track-meta);
  color: var(--w-ink-2);
}

/* =========================================================
   Family helpers
   - .w-sans is the default; apply it to re-assert sans after a mono island
   - .w-mono for genuinely monospaced runs (code, IDs, timestamps, data)
   - .w-prose for long-form reading measure (terms, blog, recruiting)
   - .w-pixel-* for display-only brand moments (hero lockup, poster)
   ========================================================= */
.w-mono  { font-family: var(--w-mono); }
.w-sans  { font-family: var(--w-sans); }

/* Long-form prose: Geist Sans at a comfortable reading measure, ink-1 on
   void. The default body is already sans; .w-prose just tunes size and
   leading for multi-paragraph reading. */
.w-prose {
  font-family: var(--w-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--w-ink-1);
  font-weight: 400;
}
.w-prose p { margin: 0 0 1em; }
.w-prose p:last-child { margin-bottom: 0; }

/* Pixel display — five textures. Pick one per surface, never mix.
   Always pair with generous tracking and full-pixel sizes (24/32/48/64).
   Sub-pixel rendering ruins these — disable smoothing where supported. */
.w-pixel,
.w-pixel-square,
.w-pixel-circle,
.w-pixel-grid,
.w-pixel-line,
.w-pixel-triangle {
  font-weight: 400;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.w-pixel          { font-family: var(--w-pixel-square); }
.w-pixel-square   { font-family: var(--w-pixel-square); }
.w-pixel-circle   { font-family: var(--w-pixel-circle); }
.w-pixel-grid     { font-family: var(--w-pixel-grid); }
.w-pixel-line     { font-family: var(--w-pixel-line); }
.w-pixel-triangle { font-family: var(--w-pixel-triangle); }

/* Tabular figures everywhere numbers run */
.w-num { font-variant-numeric: tabular-nums; }

/* Hairline rules */
.w-hr       { border: 0; border-top: 1px solid var(--w-hair); margin: 0; }
.w-hr-edge  { border: 0; border-top: 1px solid var(--w-edge); margin: 0; }

/* Caret — the only "alive" element on the page */
.w-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--w-ink-1);
  margin-left: 0.12ch;
  transform: translateY(0.08em);
  animation: w-blink var(--w-blink-dur) steps(1, end) infinite;
}
@keyframes w-blink {
  0%, 50%       { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}

/* Geometric primitive — small rotated square. Use sparingly as marker. */
.w-diamond {
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 1px solid var(--w-ink-3);
  transform: rotate(45deg);
}
.w-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--w-ink-3);
  border-radius: 50%;
}

/* Page-level CRT scanline overlay */
.w-scanline-bg {
  background-image: var(--w-scanline);
}

/* Selection */
::selection { background: var(--w-ink-4); color: var(--w-ink-1); }

/* =========================================================
   Type family helpers
   The default is Geist Sans. The helpers below re-assert a family
   when a surface needs to step off the default:
     .w-mono  — monospaced runs (code, IDs, timestamps, tabular data)
     .w-pixel — display-only brand moments
   ========================================================= */

/* Mono — fixed-width glyph runs inside an otherwise-sans surface: code,
   ULIDs, hashes, timestamps, paths, IPs, KPI numerals. This is where sans
   and mono intentionally sit side by side. */
.w-mono {
  font-family: var(--w-mono);
}

/* Pixel display \u2014 five glyph systems, one per variant. Pick one
   per surface; do not mix variants. Tracking goes wider than mono
   so the bitmap reads as legible at display sizes. */
.w-pixel {
  font-family: var(--w-pixel-square);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-weight: 400;
}
.w-pixel--triangle { font-family: var(--w-pixel-triangle); }
.w-pixel--square   { font-family: var(--w-pixel-square);   }
.w-pixel--line     { font-family: var(--w-pixel-line);     }
.w-pixel--grid     { font-family: var(--w-pixel-grid);     }
.w-pixel--circle   { font-family: var(--w-pixel-circle);   }