/* =========================================================================
   The Counting House — Theme Tokens
   Phosphor-green-on-black CRT terminal aesthetic, Victorian ledger dressing.
   Shared across all views/phases.
   ========================================================================= */

:root {
  /* Colors */
  --ch2-bg: #0a0a0a;
  --ch2-bg-panel: rgba(5, 8, 6, 0.85); /* FP#5 v1.1 pane glass */
  --ch2-bg-glass: rgba(5, 8, 6, 0.75); /* FP#5 v1.1 button glass */
  --ch2-green: #00ff41;
  --ch2-green-dim: #1a4a2a;
  --ch2-green-bright: #7fff7f;
  --ch2-red: #ff3b3b;
  --ch2-amber: #ffb000;
  --ch2-input-bg: #000000;
  --ch2-radius-pane: 10px;
  --ch2-radius-btn: 8px;
  --ch2-radius-modal: 12px;

  /* Typography */
  --ch2-font-heading: 'Orbitron', 'Share Tech Mono', monospace;
  --ch2-font-body: 'Share Tech Mono', monospace;

  /* Glow — Lucienne parity (Aug 17 '26): hotter cores, tight double shadows */
  --ch2-glow-sm: 0 0 6px rgba(0, 255, 65, 0.4);
  --ch2-glow-md: 0 0 10px rgba(0, 255, 65, 0.8), 0 0 4px rgba(0, 255, 65, 0.6);
  --ch2-glow-lg: 0 0 20px rgba(0, 255, 65, 0.9), 0 0 8px rgba(0, 255, 65, 0.7);

  /* Atmosphere — panels float over the background image (Lucienne pattern) */
  --ch2-bg-image: url('../ch-bg.png');
  --ch2-panel-opacity: 0.86;

  /* R11 typography — H3 body contrast ~85% opacity green */
  --ch2-h3-opacity: 0.85;

  /* Layout */
  --ch2-topbar-h: 48px;
  --ch2-bottombar-h: 32px;
  --ch2-navtabs-h: 52px;
  --ch2-leftnav-w: 170px;
  --ch2-rightpanel-w: 300px;

  /* Grid backdrop pattern */
  --ch2-grid-line: rgba(0, 255, 65, 0.05);
  --ch2-grid-size: 32px;
}

/* -------------------------------------------------------------------------
   Nuclear reset
   ------------------------------------------------------------------------- */

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

html,
body {
  height: 100%;
  background: var(--ch2-bg);
  color: var(--ch2-green);
  font-family: var(--ch2-font-body);
}

body {
  background-image:
    linear-gradient(var(--ch2-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ch2-grid-line) 1px, transparent 1px);
  background-size: var(--ch2-grid-size) var(--ch2-grid-size);
  overflow: hidden;
}

h1,
h2,
h3,
h4,
.ch2-heading {
  font-family: var(--ch2-font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

button {
  font-family: inherit;
}

.ch2-glow-text {
  color: var(--ch2-green);
  text-shadow: var(--ch2-glow-sm);
}

.ch2-dim {
  color: var(--ch2-green-dim);
}

.ch2-bright {
  color: var(--ch2-green-bright);
  text-shadow: var(--ch2-glow-md);
}

/* R11 typography standard */
.ch2-h1 {
  font-family: var(--ch2-font-heading);
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--ch2-green-bright);
  text-shadow: var(--ch2-glow-lg);
}

.ch2-h2 {
  font-family: var(--ch2-font-heading);
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: var(--ch2-green);
  text-shadow: var(--ch2-glow-md);
}

.ch2-h3 {
  font-family: var(--ch2-font-body);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.04em;
  color: rgba(0, 255, 65, var(--ch2-h3-opacity));
  text-shadow: none;
}

a {
  color: var(--ch2-green);
}

::selection {
  background: var(--ch2-green-dim);
  color: var(--ch2-bg);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ch2-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ch2-green-dim);
}

/* -------------------------------------------------------------------------
   Inputs — black bg + phosphor green text, ALWAYS, even disabled/stub.
   Every later phase inherits these rules; do not override elsewhere.
   ------------------------------------------------------------------------- */

input,
textarea,
select {
  background: var(--ch2-input-bg);
  color: var(--ch2-green);
  border: 1px solid var(--ch2-green-dim);
  font-family: var(--ch2-font-body);
  caret-color: var(--ch2-green);
}

input::placeholder,
textarea::placeholder {
  color: var(--ch2-green-dim);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ch2-green);
  box-shadow: var(--ch2-glow-sm);
}

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--ch2-input-bg);
  color: var(--ch2-green-dim);
  border-color: #222;
  cursor: not-allowed;
}

/* =========================================================================
   CRT scanline overlay — fixed over the entire viewport
   ========================================================================= */

.ch2-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 255, 65, 0.025) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: overlay;
}

/* Very subtle vignette to sell the CRT tube feel */
.ch2-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85);
}

/* =========================================================================
   Corner brackets — decorative L-shaped borders on panels
   ========================================================================= */

.ch2-corner-brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ch2-corner-brackets::before,
.ch2-corner-brackets::after,
.ch2-corner-brackets span::before,
.ch2-corner-brackets span::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--ch2-green-dim);
}

.ch2-corner-brackets::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.ch2-corner-brackets::after {
  top: 6px;
  right: 6px;
  border-left: none;
  border-bottom: none;
}

.ch2-corner-brackets span::before {
  bottom: 6px;
  left: 6px;
  border-right: none;
  border-top: none;
}

.ch2-corner-brackets span::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

/* Blinking cursor removed in R11.5 — footer shows active panel name only. */

@media (max-width: 768px) {
  :root {
    --ch2-radius-pane: 6px;
    --ch2-radius-btn: 7px;
    --ch2-radius-modal: 10px;
  }
}