/* THE BASE — design tokens & starter stylesheet.
   v2 — a real token set (color scale, spacing scale, type scale),
   not placeholders. Zero literal colors outside :root — checked, not
   hoped for, same discipline ud-security.com's admin.css already
   holds itself to (94 var(--token) references, not one hex/rgba
   outside the block that defines them).

   DELIBERATELY no Google Fonts / external font link: this site's CSP
   is `default-src 'self'` (see ri-app/lib/security.php) — a <link> to
   fonts.googleapis.com gets silently BLOCKED, not silently degraded.
   That exact mistake already shipped once on ud-security.com and
   "verified from screenshots" while production quietly fell back to
   Arial (see claude/ud-build-state.md) — self-hosting the font files
   under assets/fonts/ was the fix there. Headings get their brand
   weight here from system fonts styled hard (heavy weight, uppercase,
   tracked-out letter-spacing) instead — zero network risk, zero
   layout-shift risk, matches the Base's own Performance module rules.
   If a real self-hosted brand font is wanted later, it plugs into
   --font-heading below and nothing else needs to change. */
:root {
  /* Color */
  --bg:           #0a0a0c;
  --bg-elevated:  #16161a;
  --fg:           #eaeaea;
  --muted:        #9a9aa2;
  --border:       #26262c;
  --accent:       #c81e2c;
  --accent-hover: #e0303f;
  --focus:        #4da3ff;
  --danger:       #ff6b6b;
  --on-accent:    #ffffff;
  --accent-glow:  rgba(200, 30, 44, 0.45);
  --accent-bright: #ff5a67;
  --grid-line:    rgba(255, 255, 255, 0.035);

  /* Digital-rain background (coming-soon.php only) — faint dark red
     for the ordinary falling characters, a modestly brighter red for
     the scattered "187DK.COM" reveals. Tokens, not literals in the
     JS, so the look stays defined in one place. */
  --rain-dim:    rgba(120, 20, 28, 0.35);
  --rain-glow:   #ff4757;

  /* Type scale — 1.25 ratio off a 16px base */
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --font-heading: -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Spacing scale — 4px base unit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius: 4px;
}

* { box-sizing: border-box; }

/* ── Ambient brand background — applies to EVERY page for free ──────
   A soft light pool near the top plus a faint moving grid, the same
   "blueprint grid + glow token" language ud-security.com's theme
   already uses for this dynasty's dark/security sites (see
   claude/ud-security-rebuild.md). Pure CSS — no images, no extra HTTP
   requests, so it costs nothing on Performance or Security (CSP-safe,
   self-hosted by definition) — the win is real depth instead of a
   flat single color, which was the actual "looks the same, no wow"
   complaint about v2. Respects prefers-reduced-motion. */
body {
  position: relative;
  margin: 0; color: var(--fg);
  background:
    radial-gradient(ellipse 1000px 600px at 50% -10%, var(--bg-elevated), transparent 70%),
    var(--bg);
  font: var(--text-base)/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 15%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 55% at 50% 15%, #000 40%, transparent 90%);
  animation: base-grid-pan 50s linear infinite;
}
@keyframes base-grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
/* Real content sits above the ambient background layer. */
.skip-link, .site-header, main, .site-footer, .cs-hero, .cs-info {
  position: relative; z-index: 1;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-4); }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Accessibility: a visible focus ring on EVERY interactive element,
   never suppressed with outline:none. Keyboard nav must be able to
   see where it is. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

.site-header, .site-footer { padding: var(--space-4) var(--space-6); }
.site-header .brand {
  color: var(--fg); text-decoration: none; font-weight: 700;
}
main { padding: var(--space-8) var(--space-6); max-width: 800px; margin: 0 auto; }

.error { color: var(--danger); }

label {
  display: block; margin-top: var(--space-4);
  font-size: var(--text-sm); color: var(--muted);
}
input, textarea {
  width: 100%; padding: var(--space-3); margin-top: var(--space-1);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--fg); border-radius: var(--radius); font-size: var(--text-base);
  font-family: inherit;
}
input:focus-visible, textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

button {
  margin-top: var(--space-6); padding: var(--space-3) var(--space-6);
  background: var(--accent); color: var(--on-accent); border: none;
  border-radius: var(--radius); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
button:hover { background: var(--accent-hover); box-shadow: 0 0 24px var(--accent-glow); }
button:active { transform: translateY(1px); }