:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-40: 2.5rem;
  --text-56: 3.5rem;

  --text-xs: var(--text-12);
  --text-sm: var(--text-14);
  --text-base: var(--text-16);
  --text-lg: var(--text-18);
  --text-xl: var(--text-20);
  --text-2xl: var(--text-24);
  --text-3xl: var(--text-32);
  --text-4xl: var(--text-40);
  --text-5xl: var(--text-56);

  --line-height-tight: 1.14;
  --line-height-heading: 1.2;
  --line-height-body: 1.76;
  --line-height-relaxed: 1.82;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;

  --type-h1: clamp(2.35rem, 4.1vw, 3.4rem);
  --type-h2: clamp(1.8rem, 3vw, 2.45rem);
  --type-h3: clamp(1.28rem, 2.1vw, 1.62rem);
  --type-body: clamp(1.04rem, 1rem + 0.2vw, 1.12rem);
  --type-body-md: clamp(1.1rem, 1.04rem + 0.24vw, 1.2rem);
  --type-body-sm: clamp(0.9rem, 0.88rem + 0.08vw, 0.96rem);
  --type-small: clamp(0.88rem, 0.86rem + 0.08vw, 0.94rem);
  --type-caption: var(--text-12);
  --touch-target-min: 44px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;

  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 18px;
  --radius-4: 22px;
  --radius-pill: 999px;
  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);
  --radius-lg: var(--radius-3);
  --radius-xl: var(--radius-4);

  --blur-1: 12px;
  --blur-2: 20px;

  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-medium: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-medium: 240ms;

  --max-width: 1200px;
  --container-text: 760px;
  --measure-readable: 66ch;
  --measure-readable-tight: 60ch;
  --measure-heading: 24ch;
  --container-pad: clamp(14px, 3.4vw, 20px);
  --section-pad: clamp(64px, 8vw, 112px);
  --section-pad-tight: clamp(48px, 6.5vw, 84px);
  --section-pad-hero: clamp(28px, 4.2vw, 56px);
  --hero-min-height: clamp(140px, 24vh, 240px);
  --card-pad: clamp(24px, 2.7vw, 34px);
}

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0b1120;
  --color-bg-muted: #10192d;
  --color-surface-1: #141f38;
  --color-surface-2: #1b2844;
  --color-surface-3: #243357;
  --color-border: rgba(164, 177, 212, 0.24);
  --color-border-strong: rgba(182, 197, 232, 0.38);
  --color-text-1: #f4f7ff;
  --color-text-2: #cad2e8;
  --color-text-3: #aab7d3;
  --color-primary: #7f75ff;
  --color-primary-strong: #a59cff;
  --color-accent: #48cbde;
  --color-accent-strong: #75dae8;
  --color-warm: #f3c96a;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-on-primary: #f9faff;
  --color-surface-overlay: rgba(10, 15, 29, 0.86);
  --color-overlay: rgba(7, 10, 20, 0.62);
  --color-overlay-strong: rgba(6, 9, 18, 0.76);
  --shadow-rgb: 7, 10, 22;
  --status-policy-fg: #bbf7d0;
  --status-ops-fg: #bfdbfe;
  --status-tech-fg: #fecaca;
  --status-creative-fg: #e9d5ff;
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #e9edf8;
  --color-bg-muted: #dfe5f4;
  --color-surface-1: #f5f7fd;
  --color-surface-2: #e8edf8;
  --color-surface-3: #d9e1f2;
  --color-border: rgba(90, 105, 143, 0.28);
  --color-border-strong: rgba(90, 105, 143, 0.42);
  --color-text-1: #0f1830;
  --color-text-2: #2f3b58;
  --color-text-3: #4f5f83;
  --color-primary: #5f54e8;
  --color-primary-strong: #7a70ef;
  --color-accent: #158ea8;
  --color-accent-strong: #2da5bf;
  --color-warm: #b88920;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-on-primary: #ffffff;
  --color-surface-overlay: rgba(238, 243, 252, 0.9);
  --color-overlay: rgba(20, 33, 58, 0.24);
  --color-overlay-strong: rgba(20, 33, 58, 0.36);
  --shadow-rgb: 17, 28, 52;
  --status-policy-fg: #166534;
  --status-ops-fg: #1e3a8a;
  --status-tech-fg: #991b1b;
  --status-creative-fg: #5b21b6;
}

:root {
  --shadow-1: 0 1px 2px rgba(var(--shadow-rgb), 0.2);
  --shadow-2: 0 10px 24px rgba(var(--shadow-rgb), 0.24);
  --shadow-3: 0 18px 40px rgba(var(--shadow-rgb), 0.32);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 26%, transparent), 0 14px 32px color-mix(in srgb, var(--color-primary) 22%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 34%, transparent);
  --focus-ring-strong: 0 0 0 1px var(--color-surface-1), 0 0 0 4px color-mix(in srgb, var(--color-primary) 38%, transparent);

  --color-background: var(--color-bg);
  --color-surface: var(--color-surface-1);
  --color-surface-subtle: var(--color-surface-2);
  --color-surface-elevated: var(--color-surface-3);
  --color-text: var(--color-text-1);
  --color-text-muted: var(--color-text-2);
  --color-text-subtle: var(--color-text-3);
  --color-border-subtle: var(--color-border);
  --color-border-emphasis: var(--color-border-strong);
  --color-primary-base: var(--color-primary);
  --color-accent-base: var(--color-accent);

  --bg: var(--color-bg);
  --bg-elevated: var(--color-surface-3);
  --bg-0: var(--color-bg);
  --bg-1: var(--color-bg-muted);
  --bg-2: color-mix(in srgb, var(--color-surface-2) 85%, var(--color-bg) 15%);
  --surface: var(--color-surface-1);
  --surface-1: var(--color-surface-1);
  --surface-2: var(--color-surface-2);
  --surface-elevated: var(--color-surface-3);
  --glass: color-mix(in srgb, var(--color-surface-1) 58%, transparent);
  --text: var(--color-text-1);
  --text-1: var(--color-text-1);
  --text-2: var(--color-text-2);
  --text-3: var(--color-text-3);
  --text-strong: var(--color-text-1);
  --text-muted: var(--color-text-2);
  --muted: var(--color-text-3);
  --link: var(--color-text-2);
  --border: var(--color-border);
  --border-subtle: var(--color-border);
  --border-strong: var(--color-border-strong);

  --color-bg-base: var(--color-bg);
  --color-surface-base: var(--color-surface-1);

  --lav: var(--color-primary);
  --lav-2: color-mix(in srgb, var(--color-primary) 78%, var(--color-on-primary) 22%);
  --lav-soft: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --lav-glow: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --lav-grad-a: color-mix(in srgb, var(--color-primary) 36%, transparent);
  --lav-grad-b: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --aqua: var(--color-accent);
  --aqua-2: var(--color-accent-strong);
  --aqua-soft: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --aqua-glow: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --sun: var(--color-warm);
  --sun-soft: color-mix(in srgb, var(--color-warm) 20%, transparent);
  --sun-glow: color-mix(in srgb, var(--color-warm) 32%, transparent);

  --page-accent: var(--lav);
  --page-accent-soft: var(--lav-soft);
  --page-accent-glow: var(--lav-glow);
  --accent: var(--color-primary);
  --accent-2: var(--color-accent);
  --accent-soft: color-mix(in srgb, var(--color-primary) 18%, transparent);

  --card-bg: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  --card-border: color-mix(in srgb, var(--border) 82%, transparent 18%);
  --card-shadow: var(--shadow-1);
  --hero-glow: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--page-accent-glow) 62%, transparent), transparent 70%);
  --header-bg: color-mix(in srgb, var(--color-surface-overlay) 88%, transparent);
  --header-bg-scrolled: color-mix(in srgb, var(--color-surface-overlay) 96%, var(--surface) 4%);

  --on-primary: var(--color-on-primary);
  --surface-overlay: var(--color-surface-overlay);
  --overlay-backdrop: var(--color-overlay);
  --overlay-strong: var(--color-overlay-strong);
  --media-bg: color-mix(in srgb, var(--surface-elevated) 82%, black 18%);
  --elevation-drop: drop-shadow(0 8px 16px rgba(var(--shadow-rgb), 0.22));
  --elevation-drop-soft: drop-shadow(0 6px 12px rgba(var(--shadow-rgb), 0.2));
  --elevation-drop-subtle: drop-shadow(0 5px 10px rgba(var(--shadow-rgb), 0.16));
  --elevation-drop-dark: brightness(1.08) drop-shadow(0 8px 16px rgba(var(--shadow-rgb), 0.45));
  --primary-outline: color-mix(in srgb, var(--page-accent) 45%, transparent);
  --primary-border: color-mix(in srgb, var(--page-accent) 32%, transparent);
  --danger-soft: color-mix(in srgb, var(--color-danger) 14%, transparent);
  --danger-border: color-mix(in srgb, var(--color-danger) 34%, transparent);
}

body[data-accent='aqua'] {
  --page-accent: var(--aqua);
  --page-accent-soft: var(--aqua-soft);
  --page-accent-glow: var(--aqua-glow);
}

body[data-accent='sun'] {
  --page-accent: var(--sun);
  --page-accent-soft: var(--sun-soft);
  --page-accent-glow: var(--sun-glow);
}