/* ZOLTAN — the design system.
 *
 * Zoltan is Hank's username: the cult leader from "Dude, Where's My Car?",
 * crossed with Boris Grishenko from GoldenEye and Acid Burn from Hackers
 * (1995). Read those three together and the look writes itself — a 1990s
 * hacker-cult: CRT phosphor, bubble wrap jumpsuits, basement neon, and total
 * conviction about something faintly ridiculous.
 *
 * Built as TOKENS, not a stylesheet, because Hank asked for something
 * "workable to add and apply to many things". Import this file, use the
 * variables, and a page inherits the identity without inheriting layout.
 *
 * PALETTE PROVENANCE — each colour is doing a job, not decorating:
 *   --z-phosphor  the green of a P1 CRT. The primary. Everything Zoltan
 *                 knows, he learned off a screen this colour.
 *   --z-magenta   Acid Burn. The accent, used sparingly — it is the only
 *                 warm thing in the system and it stops working the moment
 *                 it is everywhere.
 *   --z-cyan      the rim light. Structure, borders, the second voice.
 *   --z-void      basement black. Not #000: a true black kills the glow,
 *                 because bloom needs something to bloom against.
 *   --z-chrome    the jumpsuit. Silver for anything that should read as
 *                 an object rather than as light.
 *
 * ACCESSIBILITY, stated honestly: phosphor-on-void is ~13:1 and fine.
 * MAGENTA ON VOID IS ~4.3:1 — it passes AA for large text ONLY. Never set
 * body copy in --z-magenta; that is what --z-phosphor and --z-chrome are
 * for. The glow utilities are decoration and must never be the only way a
 * state is communicated.
 */

:root {
  /* ---- core palette ---- */
  --z-void:        #07070b;
  --z-void-2:      #0d0d14;   /* raised surface */
  --z-phosphor:    #39ff9c;
  --z-phosphor-dim:#1f8f57;
  --z-magenta:     #ff2fa0;
  --z-cyan:        #34e6ff;
  --z-chrome:      #d7dce5;
  --z-chrome-dim:  #8a90a0;

  /* ---- semantic ---- */
  --z-bg:          var(--z-void);
  --z-surface:     var(--z-void-2);
  --z-fg:          var(--z-chrome);
  --z-muted:       var(--z-chrome-dim);
  --z-accent:      var(--z-phosphor);
  --z-accent-2:    var(--z-magenta);
  --z-line:        #1e2030;

  /* ---- glow: the one effect that carries the whole look ----
     Kept as tokens so a page never hand-rolls a box-shadow and drifts. */
  --z-glow-sm:     0 0 6px  color-mix(in srgb, var(--z-accent) 55%, transparent);
  --z-glow:        0 0 14px color-mix(in srgb, var(--z-accent) 45%, transparent);
  --z-glow-lg:     0 0 44px color-mix(in srgb, var(--z-accent) 32%, transparent);
  --z-glow-magenta:0 0 24px color-mix(in srgb, var(--z-accent-2) 40%, transparent);

  /* ---- type: a terminal and a voice ---- */
  --z-mono:  ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  --z-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --z-track: .08em;   /* letter-spacing for display caps */

  --z-radius: 10px;
  --z-line-w: 1px;
}

/* SCANLINES. The single most load-bearing texture in the system: it is what
   makes a flat page read as a screen. Applied as an overlay so it never
   interferes with content, and disabled for anyone who asked for less motion
   or higher contrast. */
.z-scan { position: relative; }
.z-scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  .z-scan::after { display: none; }
}

/* ---- the pieces worth having as classes ---- */
.z-surface {
  background: var(--z-surface);
  border: var(--z-line-w) solid var(--z-line);
  border-radius: var(--z-radius);
}
.z-title {
  font-family: var(--z-mono);
  text-transform: uppercase;
  letter-spacing: var(--z-track);
  color: var(--z-accent);
  text-shadow: var(--z-glow-sm);
}
.z-cta {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--z-mono); text-transform: uppercase;
  letter-spacing: var(--z-track); text-decoration: none;
  padding: .9em 1.6em; border-radius: var(--z-radius);
  color: var(--z-void); background: var(--z-accent);
  box-shadow: var(--z-glow);
  transition: box-shadow .18s ease, transform .18s ease;
}
.z-cta:hover { box-shadow: var(--z-glow-lg); transform: translateY(-1px); }
.z-cta:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: 3px; }
/* Motion is an enhancement, never the message. */
@media (prefers-reduced-motion: reduce) { .z-cta { transition: none; } }

/* The emblem is line art on transparent, so it tints with currentColor
   nowhere — it carries its own colour. Size it, do not recolour it. */
.z-emblem { display: block; width: 96px; height: auto; filter: drop-shadow(var(--z-glow-sm)); }

/* ---- ASSETS (masters archived beside this file) ----
 *   zoltan-hero-1.png    1024x1536  portrait: the leader, CRT wall
 *   zoltan-banner-1.png  1536x1024  wide: the congregation, server cathedral
 *   zoltan-emblem-1.png  1024x1024  transparent sigil — favicons, badges, avatars
 * Every generation (used and unused) is in /srv/imagegen/robinhoodchain/
 * with its prompt in index.jsonl, so any of them can be regenerated or
 * re-cut without guessing what was asked for.
 */