/**
 * CLAWOLF Executive Visual Language — design tokens (light environment).
 * Color source: official CLAWOLF logo palette only.
 */
:root {
  /* Navy — CLA letterform (headlines, nav, doctrine) */
  --exec-navy-900: #071428;
  --exec-navy-800: #0c1f3d;
  --exec-navy-700: #122a52;

  /* Indigo / purple — architecture, runtime, cards, diagrams */
  --exec-indigo-600: #5e6ad2;
  --exec-indigo-500: #6b74d6;
  --exec-indigo-400: #818cf8;
  --exec-violet-500: #7c6fd6;

  /* Cyan — live flow, interaction, active, data movement */
  --exec-cyan-600: #0097b2;
  --exec-cyan-500: #00b8d4;
  --exec-cyan-400: #22d3ee;

  /* Neutral blue-gray — body and supporting copy */
  --exec-ink-body: #334155;
  --exec-ink-muted: #475569;
  --exec-ink-soft: #64748b;
  --exec-border: #d8e0ec;
  --exec-border-strong: #b8c5d9;

  /* Surfaces */
  --exec-bg-page: #f4f7fb;
  --exec-bg-elevated: #ffffff;
  --exec-bg-subtle: #e8eef6;
  --exec-bg-arch: linear-gradient(165deg, #f8fafc 0%, #eef2f9 48%, #e8eef8 100%);

  /* Typography */
  --exec-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --exec-font-display: "Inter", var(--exec-font-sans);
  --exec-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --exec-text-base: 1.0625rem; /* 17px */
  --exec-text-lede: 1.25rem; /* 20px */
  --exec-leading: 1.65;

  /* Spacing scale */
  --exec-space-1: 0.25rem;
  --exec-space-2: 0.5rem;
  --exec-space-3: 0.75rem;
  --exec-space-4: 1rem;
  --exec-space-6: 1.5rem;
  --exec-space-8: 2rem;
  --exec-space-12: 3rem;
  --exec-space-16: 4rem;
  --exec-space-20: 5rem;

  /* Layout */
  --exec-max-width: 72rem;
  --exec-max-read: 42rem;
  --exec-radius-sm: 6px;
  --exec-radius-md: 10px;
  --exec-radius-lg: 14px;

  /* Elevation */
  --exec-shadow-sm: 0 1px 2px rgba(7, 20, 40, 0.06);
  --exec-shadow-md: 0 8px 28px rgba(7, 20, 40, 0.08);
  --exec-shadow-lg: 0 20px 50px rgba(7, 20, 40, 0.1);

  /* Focus */
  --exec-focus-ring: 0 0 0 3px rgba(0, 184, 212, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.exec-page {
  margin: 0;
  font-family: var(--exec-font-sans);
  font-size: var(--exec-text-base);
  line-height: var(--exec-leading);
  color: var(--exec-ink-body);
  background: var(--exec-bg-page);
  -webkit-font-smoothing: antialiased;
}

body.exec-page a {
  color: var(--exec-cyan-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.exec-page a:hover {
  color: var(--exec-navy-800);
}

.exec-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: var(--exec-space-3) var(--exec-space-4);
  background: var(--exec-navy-900);
  color: #fff;
  font-weight: 600;
}

.exec-skip-link:focus {
  left: var(--exec-space-4);
  top: var(--exec-space-4);
  outline: none;
  box-shadow: var(--exec-focus-ring);
}