:root {
  /* ==========================================================================
     AETHER DESIGN SYSTEM — OFFICIAL DESIGN TOKENS
     Source: docs/04-DESIGN-SYSTEM-OFICIAL.md
     ========================================================================== */

  /* 1. Official Color Palette (Strict 5-Color System) */
  --color-deep-black: #0A0A0A;
  --color-aether-blue: #001E62;
  --color-sky-gray: #8EA4C7;
  --color-off-white: #F7F7F7;
  --color-stone: #D6C9B8;

  /* Semantic Alpha Linework (14%-24% light, 18%-32% dark) */
  --border-light: rgba(10, 10, 10, 0.16);
  --border-light-subtle: rgba(10, 10, 10, 0.08);
  --border-dark: rgba(247, 247, 247, 0.22);
  --border-dark-subtle: rgba(247, 247, 247, 0.12);
  --border-accent: rgba(142, 164, 199, 0.28);

  /* Functional alert only (not part of brand identity) */
  --color-semantic-error: #B02A37;

  /* 2. Typography */
  --font-display: 'Michroma', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Typographic Scales (Clamp-based) */
  --text-display-hero: clamp(1.85rem, 5.5vw, 6.25rem);
  --text-headline-lg: clamp(1.65rem, 4vw, 4.25rem);
  --text-headline-md: clamp(1.35rem, 2.8vw, 3.0rem);
  --text-headline-sm: clamp(1.15rem, 1.8vw, 1.85rem);
  --text-editorial-lead: clamp(1.1rem, 1.6vw, 1.85rem);
  --text-body-lg: clamp(1.0rem, 1.15vw, 1.25rem);
  --text-body-md: clamp(0.925rem, 1.0vw, 1.0625rem);
  --text-body-sm: clamp(0.825rem, 0.9vw, 0.9375rem);
  --text-ui-action: 0.9375rem;
  --text-code-meta: 0.75rem;

  /* Line Heights */
  --leading-tight: 1.0;
  --leading-display: 1.06;
  --leading-headline: 1.12;
  --leading-editorial: 1.32;
  --leading-body: 1.6;
  --leading-ui: 1.2;

  /* Letter Spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-meta: 0.18em;
  --tracking-meta-wide: 0.24em;

  /* 3. Spacing Scale (4px base unit) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 160px;

  /* Section Rhythm */
  --section-space-y: clamp(36px, 5.5vw, 80px);
  --section-pad-inner: clamp(20px, 3.5vw, 64px);

  /* Container & Margins */
  --container-max-width: 1600px;
  --page-margin: clamp(16px, 3.5vw, 72px);

  /* 4. Motion & Transitions */
  --ease-aether: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-standard: 300ms;
  --duration-narrative: 650ms;

  /* 5. Geometry */
  --radius-none: 0px;
  --radius-subtle: 2px;
  --radius-control: 4px;
}