/* ============================================================
   ANIMA ARTIFEX — CRT TERMINAL DESIGN SYSTEM
   colors_and_type.css
   ============================================================ */

/* ---------- Web fonts (Google Fonts fallback) ---------- */
/* PRIMARY: VT323 — emulates VT100/DEC terminals (single weight). */
/* SECONDARY: IBM Plex Mono — for body/console text requiring weights. */
/* FLAG: no original foundry files supplied; these are close CRT matches. */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS — CRT PHOSPHOR PALETTE
     Three phosphor modes exist in the brand: P1 Green, P3 Amber, B&W.
     Default is P1 green. Override by setting [data-phosphor="amber"]
     on a root element.
     ============================================================ */

  /* Base — black void of the tube */
  --bg-void:       #000000;              /* true black — the CRT off-state */
  --bg-terminal:   #020604;              /* ever-so-slightly warmer for green */
  --bg-raster:     #060a07;              /* panel / deeper-inset surfaces */
  --bg-hover:      #0a1a0d;              /* dim green wash on hover */
  --bg-selection:  #1a3a1f;              /* menu select bar */

  /* P1 Green phosphor — the default */
  --fg-green-dim:    #1f5a2a;            /* scan-line trail / disabled */
  --fg-green:        #33ff66;            /* primary phosphor bright */
  --fg-green-hi:     #a8ffb8;            /* peak bloom / cursor core */
  --fg-green-glow:   #33ff66;            /* used in text-shadow */

  /* P3 Amber phosphor — alternate */
  --fg-amber-dim:    #6b3d0a;
  --fg-amber:        #ffb347;
  --fg-amber-hi:     #ffe0a8;
  --fg-amber-glow:   #ffb347;

  /* B&W phosphor — alternate */
  --fg-mono-dim:     #4a4a4a;
  --fg-mono:         #d8d8d8;
  --fg-mono-hi:      #ffffff;
  --fg-mono-glow:    #d8d8d8;

  /* Semantic (resolve to current phosphor, default green) */
  --fg-1:      var(--fg-green-hi);       /* brightest — headlines, cursor */
  --fg-2:      var(--fg-green);          /* primary body */
  --fg-3:      var(--fg-green-dim);      /* secondary / metadata */
  --fg-glow:   var(--fg-green-glow);
  --accent:    var(--fg-green);

  /* Status colors — remapped to within-palette variants */
  --status-ok:     var(--fg-green-hi);
  --status-warn:   var(--fg-amber);
  --status-err:    #ff4d4d;              /* the ONE off-palette: CRT red */
  --status-info:   var(--fg-green);

  /* Borders — there are no real borders; use char-based or dim phosphor */
  --rule-dim:   var(--fg-green-dim);
  --rule:       var(--fg-green);

  /* Shadows — CRT glow only. No drop-shadows elsewhere. */
  --glow-sm:   0 0 2px var(--fg-glow);
  --glow-md:   0 0 4px var(--fg-glow), 0 0 8px var(--fg-glow);
  --glow-lg:   0 0 6px var(--fg-glow), 0 0 14px var(--fg-glow), 0 0 28px color-mix(in oklab, var(--fg-glow), transparent 60%);
  --glow-text: 0 0 2px var(--fg-glow), 0 0 6px color-mix(in oklab, var(--fg-glow), transparent 50%);

  /* ============================================================
     TYPE SYSTEM
     Only monospace. Only one or two sizes in any given view.
     Sizing uses cell units — we think in characters, not pixels.
     ============================================================ */
  --font-crt:    'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  --font-mono:   'IBM Plex Mono', 'Courier New', monospace;

  /* Character cell (approx for VT323 @ 18px) */
  --ch-w:  0.55em;
  --ch-h:  1em;

  /* Size scale — terminal lines, not design units. */
  --t-xs:     14px;     /* status bar, chrome */
  --t-sm:     16px;     /* body small */
  --t-base:   20px;     /* body — the default CRT line */
  --t-lg:     24px;     /* emphasis / prompt */
  --t-xl:     32px;     /* title / H2 */
  --t-2xl:    48px;     /* banner / H1 */
  --t-ascii:  14px;     /* ASCII art — tighter */

  /* Line-height — terminals have tight leading */
  --lh-tight: 1.0;
  --lh-body:  1.15;
  --lh-log:   1.25;

  /* ============================================================
     SPACING — in character units
     ============================================================ */
  --sp-0:  0;
  --sp-1:  4px;    /* 1/2 cell */
  --sp-2:  8px;    /* 1 cell */
  --sp-3:  16px;  /* 2 cells */
  --sp-4:  24px;  /* 3 cells */
  --sp-5:  32px;  /* 4 cells */
  --sp-6:  48px;
  --sp-8:  64px;

  /* ============================================================
     NO ROUNDING. This is a CRT.
     ============================================================ */
  --radius: 0;

  /* ============================================================
     MOTION — strictly mechanical. No easing curves.
     Blinking cursor: 1.06s. Scanline drift: 8s linear.
     ============================================================ */
  --blink:        1.06s steps(2, jump-none) infinite;
  --scan-drift:   8s linear infinite;
  --boot-char:    32ms;    /* per-character typewriter step */
}

/* ============================================================
   PHOSPHOR MODES — apply to <body> or any wrapper
   ============================================================ */
[data-phosphor="amber"] {
  --fg-1:    var(--fg-amber-hi);
  --fg-2:    var(--fg-amber);
  --fg-3:    var(--fg-amber-dim);
  --fg-glow: var(--fg-amber-glow);
  --accent:  var(--fg-amber);
  --bg-terminal: #050301;
  --bg-raster:   #0a0603;
  --bg-hover:    #1a0e03;
  --bg-selection:#3a230a;
  --rule-dim:    var(--fg-amber-dim);
  --rule:        var(--fg-amber);
}
[data-phosphor="mono"] {
  --fg-1:    var(--fg-mono-hi);
  --fg-2:    var(--fg-mono);
  --fg-3:    var(--fg-mono-dim);
  --fg-glow: var(--fg-mono-glow);
  --accent:  var(--fg-mono);
  --bg-terminal: #020202;
  --bg-hover:    #141414;
  --bg-selection:#2a2a2a;
  --rule-dim:    var(--fg-mono-dim);
  --rule:        var(--fg-mono);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.crt-surface {
  background: var(--bg-terminal);
  color: var(--fg-2);
  font-family: var(--font-crt);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  text-shadow: var(--glow-text);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0.01em;
}

.crt-h1 { font-family: var(--font-crt); font-size: var(--t-2xl); line-height: var(--lh-tight); color: var(--fg-1); text-shadow: var(--glow-md); margin: 0; letter-spacing: .02em; }
.crt-h2 { font-family: var(--font-crt); font-size: var(--t-xl);  line-height: var(--lh-tight); color: var(--fg-1); text-shadow: var(--glow-sm); margin: 0; }
.crt-h3 { font-family: var(--font-crt); font-size: var(--t-lg);  line-height: var(--lh-tight); color: var(--fg-2); margin: 0; text-transform: uppercase; letter-spacing: .08em; }
.crt-p  { font-family: var(--font-crt); font-size: var(--t-base); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }
.crt-sm { font-family: var(--font-crt); font-size: var(--t-sm);  line-height: var(--lh-body); color: var(--fg-3); margin: 0; }
.crt-code,
.crt-mono { font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-body); color: var(--fg-2); }
.crt-ascii { font-family: var(--font-mono); font-size: var(--t-ascii); line-height: 1.0; white-space: pre; color: var(--fg-2); }

/* ============================================================
   CRT EFFECTS — reusable overlays
   Apply .crt-scanlines to any container.
   Apply .crt-vignette for curvature falloff.
   ============================================================ */
.crt-scanlines { position: relative; }
.crt-scanlines::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.35) 3px,
    rgba(0,0,0,0.35) 3px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 5;
}
.crt-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  animation: crt-scan-drift var(--scan-drift);
  pointer-events: none;
  z-index: 6;
}
@keyframes crt-scan-drift {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.crt-vignette { position: relative; }
.crt-vignette::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  z-index: 4;
}

.crt-flicker { animation: crt-flicker 3.2s infinite steps(8, jump-none); }
@keyframes crt-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.88; }
  98% { opacity: 1; }
  99% { opacity: 0.92; }
}

/* Blinking cursor */
.crt-cursor {
  display: inline-block;
  width: 0.6em; height: 1em;
  vertical-align: text-bottom;
  background: var(--fg-1);
  box-shadow: var(--glow-sm);
  animation: crt-blink var(--blink);
}
@keyframes crt-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   INTERACTIVE STATES
   Hover:   brighter phosphor + stronger glow
   Active:  inverse — bg becomes fg, fg becomes bg
   Focus:   dashed char-border
   Disabled: fg-3 (dim phosphor), no glow
   ============================================================ */
.crt-link { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.crt-link:hover { text-shadow: var(--glow-md); }
.crt-link:active, .crt-link.is-active { background: var(--fg-2); color: var(--bg-terminal); text-shadow: none; text-decoration: none; }

body {
  background: var(--bg-void);
  color: var(--fg-2);
  font-family: var(--font-crt);
  margin: 0;
}

::selection { background: var(--fg-2); color: var(--bg-terminal); text-shadow: none; }