/* Chaos Labs Brand Token Layer
 * Source of truth: ChaosLabsInc/company-website (SHA 37c449b9)
 * See docs/design-system.md for mapping guidance
 *
 * These tokens define the Chaos Labs visual identity as used on chaoslabs.xyz.
 * The AER site maps its semantic tokens to these primitives where appropriate.
 * Not all company-site tokens apply 1:1 — map by semantic role, not by name.
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     CHAOS LABS BRAND PRIMITIVES
     From company-website globals.css / tailwind.config.ts at pinned SHA
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Navy editorial palette — the Chaos "dark mode" hero treatment */
  --chaos-navy: #0B101C;              /* rgba(11,16,28,1) — editorial background */
  --chaos-navy-panel: #101828;        /* lifted surface on navy */
  --chaos-navy-card: #182230;         /* card/panel on navy */

  /* Light editorial palette — content areas */
  --chaos-surface: #FCFCFD;           /* primary light background */
  --chaos-surface-muted: #F5F7FA;     /* secondary/muted light surface */
  --chaos-panel: #FFFFFF;             /* elevated panel/card */

  /* Text hierarchy */
  --chaos-text-primary: #0C111D;      /* primary text on light */
  --chaos-text-secondary: rgb(152, 169, 179);  /* secondary on dark: #98A9B3 */
  --chaos-text-tertiary: rgb(89, 113, 130);    /* tertiary: #597182 */
  --chaos-text-muted: rgba(95, 104, 134, 0.65);

  /* Interactive accent */
  --chaos-accent: rgb(45, 106, 231);  /* #2D6AE7 — primary brand blue */
  --chaos-accent-hover: rgb(22, 82, 204);      /* #1652CC — hover state */
  --chaos-accent-soft: #5B8AEE;       /* lighter accent for dark backgrounds */

  /* Border / separator */
  --chaos-line: #E3E8F0;              /* light mode border */
  --chaos-line-strong: #CFD9E6;       /* emphasized border */
  --chaos-line-dark: #25354B;         /* border on navy */
  --chaos-line-dark-strong: #33455F;  /* emphasized border on navy */
  --chaos-quaternary: #CDDCE6;        /* company-site --color-quaternary: light chrome border */

  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY — Self-hosted brand fonts
     AT Aero (display), Inter (body), Aeonik Fono (mono/technical)
     ═══════════════════════════════════════════════════════════════════════════ */

  --chaos-font-display: 'AT Aero', 'Inter', system-ui, sans-serif;
  --chaos-font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --chaos-font-mono: 'Aeonik Fono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING SCALE — Consistent rhythm across components
     ═══════════════════════════════════════════════════════════════════════════ */

  --chaos-space-1: 4px;
  --chaos-space-2: 8px;
  --chaos-space-3: 12px;
  --chaos-space-4: 16px;
  --chaos-space-5: 20px;
  --chaos-space-6: 24px;
  --chaos-space-8: 32px;
  --chaos-space-10: 40px;
  --chaos-space-12: 48px;
  --chaos-space-16: 64px;

  /* ═══════════════════════════════════════════════════════════════════════════
     RADII — Rounded corners
     ═══════════════════════════════════════════════════════════════════════════ */

  --chaos-radius-sm: 4px;
  --chaos-radius-md: 7px;
  --chaos-radius-lg: 8px;
  --chaos-radius-xl: 12px;
}