/* SpaceX — generated by tools/brand_tokens.py. Do not hand-edit.

   Every value below is transcribed from awesome-design-md/design-md/spacex/DESIGN.md, read 2026-09-16
   or SOLVED from those values. What is solved is which colour each role takes:
   the published value nearest its limit that still clears its role's WCAG
   ratio against the worst ground in its own theme, so a secondary colour
   legible on the page is also legible in the band beside it.

   Depth: None. A near-black panel on black is the only lift there is, and the reference draws no shadow at all.
   Motion: Not published. The two rungs here are this portfolio's.

   An explicit data-theme wins over the system preference in both directions,
   so an in-page toggle is not fighting a media query.
*/
:root {
  color-scheme: dark light;
  --sx-paper: #000000;
  --sx-raise: #0a0a0a;
  --sx-sink: #000000;
  --sx-ink: #ffffff;
  --sx-ink-2: #f0f0fa;
  --sx-ink-3: #e0e0e8;
  --sx-stroke: #e0e0e8;
  --sx-rule: #3a3a3f;
  --sx-accent: #ffffff;
  --sx-on-accent: #000000;
  --sx-accent-text: #ffffff;
  --sx-accent-quiet: #010101;
  --sx-focus: #ffffff;
  --sx-accent-press: #f0f0fa;

  --sx-family-sans: 'Saira Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sx-family-text: 'Saira', 'Helvetica Neue', Arial, sans-serif;

  --sx-weight-regular: 400;
  --sx-weight-bold: 700;

  --sx-tracking-display: 0.02em;
  --sx-tracking-caps: 0.09em;
  --sx-tracking-micro: 0.08em;
  --sx-tracking-body: 0.02em;

  --sx-text-display-xxl: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
  --sx-leading-display-xxl: 1.1;
  --sx-text-display-xl: clamp(2rem, 1.3838rem + 2.6291vw, 3.75rem);
  --sx-leading-display-xl: 1.1;
  --sx-text-display-lg: clamp(1.625rem, 1.1408rem + 2.0657vw, 3rem);
  --sx-leading-display-lg: 1.15;
  --sx-text-body: 1rem;
  --sx-leading-body: 1.5;
  --sx-text-button-cap: 0.8125rem;
  --sx-leading-button-cap: 1.2;
  --sx-text-caption: 0.8125rem;
  --sx-leading-caption: 1.5;
  --sx-text-micro-cap: 0.75rem;
  --sx-leading-micro-cap: 1.4;

  --sx-sp-4: 0.25rem;
  --sx-sp-8: 0.5rem;
  --sx-sp-12: 0.75rem;
  --sx-sp-16: 1rem;
  --sx-sp-24: 1.5rem;
  --sx-sp-32: 2rem;
  --sx-sp-48: 3rem;
  --sx-sp-64: 4rem;
  --sx-sp-96: 6rem;
  --sx-sp-128: 8rem;

  --sx-radius-none: 0;
  --sx-radius-round: 50%;

  --sx-duration-base: 180ms;
  --sx-duration-exit: 120ms;
  --sx-ease-base: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sx-paper: #ffffff;
    --sx-raise: #ffffff;
    --sx-sink: #f0f0fa;
    --sx-ink: #000000;
    --sx-ink-2: #3a3a3f;
    --sx-ink-3: #5a5a5f;
    --sx-stroke: #5a5a5f;
    --sx-rule: #e0e0e8;
    --sx-accent: #000000;
    --sx-on-accent: #ffffff;
    --sx-accent-text: #000000;
    --sx-accent-quiet: #f8f8f8;
    --sx-focus: #000000;
    --sx-accent-press: #3a3a3f;
  }
}

:root[data-theme="light"] {
  --sx-paper: #ffffff;
  --sx-raise: #ffffff;
  --sx-sink: #f0f0fa;
  --sx-ink: #000000;
  --sx-ink-2: #3a3a3f;
  --sx-ink-3: #5a5a5f;
  --sx-stroke: #5a5a5f;
  --sx-rule: #e0e0e8;
  --sx-accent: #000000;
  --sx-on-accent: #ffffff;
  --sx-accent-text: #000000;
  --sx-accent-quiet: #f8f8f8;
  --sx-focus: #000000;
  --sx-accent-press: #3a3a3f;
}