:root {
  /* Colours, aligned on graphic-charter.html */
  --color-bg: #1C1B21;
  --color-bg-deep: #18181D;
  --color-bg-elevated: #1C1B21;
  --color-bg-elevated-2: #232228;
  --color-border: rgba(233, 243, 255, 0.10);
  --color-border-strong: rgba(233, 243, 255, 0.20);
  --color-main: #E9F3FF;
  --color-main-dim: rgba(233, 243, 255, 0.58);
  --color-main-faint: rgba(233, 243, 255, 0.32);
  --color-white: #FFFFFF;
  --color-accent: #01B5FF;
  --color-accent-dim: rgba(1, 181, 255, 0.14);
  --color-highlight: #F3683F;
  --color-highlight-hover: #FF7A4D;
  --color-highlight-dim: rgba(243, 104, 63, 0.14);
  --color-danger: #E94F4F;
  --color-danger-dim: rgba(233, 79, 79, 0.14);

  /* Type: Jost / Carlito (Google Fonts) */
  --font-display: 'Jost', 'Avenir Next', sans-serif;
  --font-body: 'Carlito', 'Segoe UI', sans-serif;

  /* Type scale */
  --size-hero: clamp(2.6rem, 5vw + 1rem, 5rem);
  --size-h2: clamp(1.8rem, 2.4vw + 1rem, 2.75rem);
  --size-h3: clamp(1.2rem, 1vw + 1rem, 1.5rem);
  --size-body: 1.05rem;
  --size-small: 0.875rem;
  --size-eyebrow: 0.8rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 11rem;

  /* Structure */
  --radius: 3px;
  --max-width: 1120px;
  --nav-height: 64px;
  --border: 1px solid var(--color-border);

  /* Signature: chromatic glitch */
  --glitch-offset: 2px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.7s;

  /* Shadows, floating elements only (charter 05) */
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
  :root {
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }
}