/**
 * VettID shared site styles — "Night Watch" design system.
 * Single source of truth for design tokens, page chrome (body, header,
 * footer), and shared primitives. Page-specific styles live in each page's
 * inline <style> block, which loads after this file and can override it.
 *
 * Palette anchors (all five load-bearing): indigo #2e2d88, gold #ffc125,
 * white #ffffff, black #000000, gray #aaaaaa.
 * Gold policy: gold is the key — mark, actions, boundary lines, evidence
 * chips. Never ambient glow, never card borders, never gradient text.
 */

:root {
  /* Grounds */
  --ground-0: #000000;          /* footer — the black anchor, verbatim */
  --ground-1: #0b0b12;          /* primary page ground */
  --band-indigo: #212062;       /* full-width indigo band ground */
  --band-light: #f4f4f6;        /* daylight band ground */

  /* Surfaces */
  --surface-1: #14142a;         /* card on black ground */
  --surface-2: #1b1b3a;         /* elevated / hover card */
  --surface-indigo: #2e2d88;    /* card on indigo band — the indigo anchor */
  --surface-light: #ffffff;     /* card on light band — the white anchor */

  /* Inks on dark */
  --ink-hi: #f7f7fa;
  --ink-body: #c9c9d6;
  --ink-mute: #aaaaaa;          /* the gray anchor, verbatim */

  /* Inks on light */
  --ink-on-light: #101018;
  --ink-on-light-mute: #4c4c58;

  /* Borders */
  --border-dark: #26263e;
  --border-indigo: #454399;
  --border-light: #d9d9df;

  /* Gold */
  --gold: #ffc125;
  --gold-hover: #ffd25a;
  --gold-ink-light: #7f640a;    /* gold-as-text on light grounds (AA) */
  --gold-wash: rgba(255, 193, 37, 0.08);

  /* Status */
  --success: #3fd97f;
  --warn: #ffb020;
  --error: #ff6b6b;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* Type */
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* ── Legacy aliases (old token names used throughout page CSS) ── */
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-dark: #7f640a;
  --accent-muted: var(--gold-wash);
  --bg-dark: var(--ground-1);
  --bg-pure: var(--ground-0);
  --bg-card: var(--surface-1);
  --bg-elevated: var(--surface-2);
  --bg-input: #101020;
  --text: var(--ink-body);
  --text-muted: var(--ink-mute);
  --text-subtle: #7c7c88;
  --border: var(--border-dark);
  --border-subtle: var(--border-dark);
  --border-accent: var(--border-dark);  /* kills ambient gold borders site-wide */
}

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--ground-1);
  color: var(--ink-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-hi);
}

.mono, .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Battlement rule — the signature device, small gold form */
.battlement-rule {
  width: 96px;
  height: 8px;
  margin: 34px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='8'%3E%3Crect x='0' width='24' height='8' fill='%23ffc125'/%3E%3Crect x='36' width='24' height='8' fill='%23ffc125'/%3E%3Crect x='72' width='24' height='8' fill='%23ffc125'/%3E%3C/svg%3E") no-repeat;
}

/* Crenellated indigo band — structural form of the signature */
.band {
  position: relative;
  background: var(--band-indigo);
  padding: 92px 24px;
  margin: 12px 0;
}
.band::before, .band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='24' height='12' fill='%23212062'/%3E%3C/svg%3E") repeat-x / 48px 12px;
}
.band::before { top: -12px; }
.band::after { bottom: -12px; transform: scaleX(-1) scaleY(-1); }

/* Header chrome (frame, logo, Coming Soon chip) lives in shared/nav.css —
   the one copy /playbooks/* also loads. Do not restyle it here; the check
   script fails the build if these selectors reappear. */

/* Footer */
footer {
  padding: 48px 24px 40px;
  text-align: center;
  border-top: 1px solid var(--border-dark);
  background: var(--ground-0);
}

footer .battlement-mini {
  width: 60px;
  height: 6px;
  margin: 0 auto 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6'%3E%3Crect x='0' width='12' height='6' fill='%23ffc125'/%3E%3Crect x='24' width='12' height='6' fill='%23ffc125'/%3E%3Crect x='48' width='12' height='6' fill='%23ffc125'/%3E%3C/svg%3E") no-repeat;
}

footer p {
  color: var(--ink-mute);
  font-size: 0.9rem;
}

footer a {
  color: var(--ink-body);
  text-decoration: none;
  transition: color var(--duration-normal);
}

footer a:hover {
  color: var(--gold);
  text-decoration: underline;
}

footer .footer-privacy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 12px;
  color: #66666e;
}

footer .footer-legal {
  color: #66666e;
  font-size: 0.75rem;
  margin-top: 10px;
}

/* Utilities */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

footer .footer-nav {
  margin-bottom: 8px;
}