/* Remnic — Direction B (Terminal) tokens
   ----------------------------------------
   Monochrome mono. One signal accent. The signal is shifted off pure phosphor
   green toward a warmer, less-hackathon "amber-lime" — borrowing the halo
   warmth from Direction C while keeping the CRT-feel.

   Type system (v2):
     • Commit Mono — all typography. Wordmark, display, body, UI, code, terminal.
       400/500/600/700. Loose apertures, warm, legible.
     • Hard rule: no second face.
*/

/* Commit Mono — self-hosted (SIL OFL).
   The fontface only ships 400 + 700, so we map 500/600 onto the 700 file
   so existing weight: 500 / 600 declarations resolve to a real bold cut
   instead of being browser-synthesized from 400. */
@font-face {
  font-family: 'Commit Mono';
  src: local('Commit Mono'),
       url('fonts/CommitMono-400-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commit Mono';
  src: local('Commit Mono Italic'),
       url('fonts/CommitMono-400-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Commit Mono';
  src: local('Commit Mono Bold'),
       url('fonts/CommitMono-700-Regular.otf') format('opentype');
  font-weight: 500 900;   /* covers 500/600/700/800 → real bold cut */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commit Mono';
  src: local('Commit Mono Bold Italic'),
       url('fonts/CommitMono-700-Italic.otf') format('opentype');
  font-weight: 500 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Surfaces — true near-black, not blue-tinted */
  --bg:           #0a0a09;
  --bg-1:         #111110;   /* card */
  --bg-2:         #181816;   /* input, code well */
  --bg-deep:      #050504;   /* sunken */

  /* Lines */
  --line:         #262522;
  --line-strong:  #36352f;
  --line-hover:   #4a4942;

  /* Foreground */
  --fg:           #f5f3ec;   /* primary */
  --fg-soft:      #c4c1b6;   /* body */
  --fg-mute:      #8a877c;   /* meta, comments */
  --fg-faint:     #5a584f;

  /* Signal — warmer than phosphor, borrowed from C's halo
     pure phosphor was #c6ff3d → too "hackathon"
     this is amber-lime: still CRT, but warmer, more confident */
  --signal:       #e8d24a;   /* primary signal */
  --signal-deep:  #c2ac2a;   /* pressed / shadow */
  --signal-soft:  #f6e58a;   /* highlight on signal bg */
  --signal-glow:  rgba(232, 210, 74, 0.25);

  /* State (terminal palette — used as accents in CLI output, not UI fills) */
  --ok:           #9ad17a;
  --warn:         #e8b14a;
  --err:          #e8755a;
  --info:         #7aa8d1;

  /* Type — single family */
  --font-display: 'Commit Mono', ui-monospace, monospace;
  --font-body:    'Commit Mono', ui-monospace, monospace;
  --mono:         var(--font-body);   /* alias — legacy callers */

  --t-display:    clamp(48px, 8vw, 96px);
  --t-h1:         48px;
  --t-h2:         32px;
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body:       14px;
  --t-small:      13px;
  --t-meta:       11px;

  /* Spacing — 4pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Radii — small only. The brand has corners. */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  120ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Display utility — no special font family swap.
   Use Commit everywhere and let size + weight control hierarchy. */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

/* Subtle scanlines on the body — the only "texture" allowed */
body.scanlines {
  background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 100% 3px;
}

::selection { background: var(--signal); color: var(--bg); }

a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--signal); color: var(--signal); }

code, pre { font-family: var(--font-body); }