/**
 * Ghosthound design tokens — brand kit v3
 * Blood red + charcoal + bone (investigator fedora mark)
 *
 * DO:
 *  - Blood red accents (#7A1F1F), charcoal/noir surfaces
 *  - Bone text on dark; GHOST (bone/charcoal) + HOUND (blood red)
 *  - Clean detective badge mark, dry wit
 *
 * DON’T:
 *  - Copper/gold chrome (legacy mockup)
 *  - Halloween purple neon, cartoon ghosts
 *  - Jagged stamp noise as primary chrome
 */

:root {
  /* Brand palette */
  --gh-ink: #0c0c0c;
  --gh-charcoal: #171717;
  --gh-slate: #282828;
  --gh-slate-mid: #444444;
  --gh-bone: #f2eeeb;
  --gh-muted: #8a8580;
  /* Primary accent = blood red (legacy var names kept for main.css) */
  --gh-blood: #7a1f1f;
  --gh-blood-deep: #5c1515;
  --gh-blood-bright: #9a3434;
  /* Solid brand red (borders/buttons). Not for body links on black — too dark. */
  --gh-copper: #7a1f1f;
  --gh-copper-deep: #5c1515;
  --gh-copper-bright: #9a3434;
  /* Links / inline accent on dark surfaces — WCAG-friendlier on #0c0c0c */
  --gh-link: #e8b4b4;
  --gh-link-hover: #f2eeeb;
  --gh-sage: #9aaf9a;
  --gh-signal: #3ddc97; /* status chips only */
  --gh-amber: #c4a35a;
  --gh-focus: #e8b4b4;

  /* Status chips */
  --gh-status-open-bg: color-mix(in srgb, var(--gh-signal) 15%, var(--gh-charcoal));
  --gh-status-open-fg: var(--gh-signal);
  --gh-status-closed-bg: var(--gh-slate);
  --gh-status-closed-fg: var(--gh-muted);
  --gh-status-inconclusive-bg: color-mix(in srgb, var(--gh-amber) 18%, var(--gh-charcoal));
  --gh-status-inconclusive-fg: var(--gh-amber);

  /* Type */
  --gh-font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --gh-font-display: Impact, "Arial Black", "Palatino Linotype", Georgia, serif;
  --gh-font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --gh-fs-meta: 0.75rem;
  --gh-fs-body: 1.0625rem;
  --gh-fs-h3: 1.25rem;
  --gh-fs-h2: 1.75rem;
  --gh-fs-h1: 2.25rem;
  --gh-fs-hero: clamp(2.25rem, 5vw, 3.75rem);
  --gh-lh-body: 1.65;
  --gh-lh-tight: 1.15;

  /* Space scale */
  --gh-space-1: 0.25rem;
  --gh-space-2: 0.5rem;
  --gh-space-3: 0.75rem;
  --gh-space-4: 1rem;
  --gh-space-5: 1.5rem;
  --gh-space-6: 2rem;
  --gh-space-7: 3rem;
  --gh-space-8: 4rem;

  /* Radius / shadow */
  --gh-radius: 4px;
  --gh-radius-lg: 8px;
  --gh-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --gh-header-h: 4.5rem;

  /* Layout */
  --gh-max: 72rem;
  --gh-content: 42rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gh-motion: 0s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}