/* ==========================================================================
   DIRECTION G — THEME TOKENS (single source of truth)
   ==========================================================================
   Shared design tokens for every Direction G page (homepage + case studies).
   Link this BEFORE any page/component CSS so component rules can use the vars.
   Project-specific mockup tokens (--proj-*) live in their own project CSS.
   ========================================================================== */

/* === DARK MODE (default) === */
:root,
[data-theme="dark"] {
  --bg: #07080B;
  --bg-soft: #0E1015;
  --surface: #14171F;
  --surface-strong: #1B1F2A;
  --line: rgba(232, 233, 236, 0.08);
  --line-strong: rgba(232, 233, 236, 0.18);
  --ink: #E8E9EC;
  --ink-soft: #8D919C;
  --ink-fainter: #787C87; /* WCAG AA: 4.8:1 on --bg (was #4A4E58 ≈ 2.4:1) */
  --accent: #5AFA7E;
  --accent-bright: #5AFA7E;
  --accent-glow: rgba(90, 250, 126, 0.25);
  --accent-glow-strong: rgba(90, 250, 126, 0.45);
  --hover-tint: rgba(90, 250, 126, 0.15);
  --warn: #FFB13A;
  --alert: #E84A4A;
  --alert-glow: rgba(232, 74, 74, 0.25);
  --nav-bg: rgba(7, 8, 11, 0.65);
  --atmos-1: rgba(90, 250, 126, 0.08);
  --atmos-2: rgba(120, 180, 255, 0.05);
  --grain-color: rgba(232, 233, 236, 0.5);
  --grain-opacity: 0.04;
}

/* === LIGHT MODE === */
[data-theme="light"] {
  --bg: #F2EEE2;
  --bg-soft: #E8E3D2;
  --surface: #FBF8EE;
  --surface-strong: #F5F1E2;
  --line: rgba(15, 16, 21, 0.10);
  --line-strong: rgba(15, 16, 21, 0.22);
  --ink: #0F1015;
  --ink-soft: #5A5E6B;
  --ink-fainter: #646778;
  --accent: #0F7A38;
  --accent-bright: #1F944C;
  --accent-glow: rgba(52, 199, 89, 0.28);
  --accent-glow-strong: rgba(52, 199, 89, 0.50);
  --hover-tint: rgba(52, 199, 89, 0.10);
  --warn: #A0531E;
  --alert: #B0392B;
  --alert-glow: rgba(176, 57, 43, 0.20);
  --nav-bg: rgba(242, 238, 226, 0.78);
  --atmos-1: rgba(231, 160, 100, 0.22);
  --atmos-2: rgba(170, 200, 180, 0.20);
  --grain-color: rgba(15, 16, 21, 0.45);
  --grain-opacity: 0.025;
}

/* === SHARED A11Y UTILITY: skip-to-content link === */
/* Lives here (not in page CSS) because every Direction G page links tokens.css */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* === TYPE & LAYOUT === */
:root {
  --display: "Funnel Display", -apple-system, sans-serif;
  --sans: "Inter", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --max-width: 1600px;
  --content-pad-x: 48px;
  --content-pad-x-mobile: 24px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}