:root{
  /* base neutrals */
  --void:#0a0a0d;
  --void-2:#111114;
  --paper:#f2f1ec;
  --paper-dim:#c9c8c2;
  --steel:#5a5a62;
  --steel-line:#2a2a2f;
  --white:#ffffff;

  /* scene accents (this brand's lighting "modes" double as its accent palette) */
  --scene-red:#ff3b4e;
  --scene-magenta:#b14bff;
  --scene-blue:#2e7cff;

  /* semantic aliases -- default scene is Signal Red; swap at runtime by
     re-declaring --accent/-soft/-dim to a scene color (see SceneSwitcher) */
  --accent:var(--scene-red);
  --accent-soft:#ff3b4e33;
  --accent-dim:#ff3b4e14;

  --surface:var(--void);
  --surface-raised:var(--void-2);
  --text-primary:var(--paper);
  --text-muted:var(--paper-dim);
  --text-faint:var(--steel);
  --border-hairline:var(--steel-line);

  --header-bg:rgba(10,10,13,.85);
  --overlay-scrim:rgba(0,0,0,.85);
  --glow-blend:screen;
  --glow-opacity:.55;
  --logo-invert:1;

  /* fixed (non-theme-flipping) colors for text/UI overlaid on always-dark
     surfaces -- photos, the 3D configurator viewport, scrim gradients --
     which stay dark regardless of site theme, so overlaid text must stay light */
  --on-dark:#f2f1ec;
  --on-dark-dim:#8f8e89;
}

/* light theme -- toggled via [data-theme="light"] on <html>; base neutrals
   swap roles (void<->paper) so every var(--void)/var(--paper) consumer
   flips automatically without per-usage overrides */
:root[data-theme="light"]{
  --void:#f6f5f0;
  --void-2:#ebe9e1;
  --paper:#17171a;
  --paper-dim:#4d4c50;
  --steel:#82807b;
  --steel-line:#ddd9d0;
  --white:#17171a;

  --surface:var(--void);
  --surface-raised:var(--void-2);
  --text-primary:var(--paper);
  --text-muted:var(--paper-dim);
  --text-faint:var(--steel);
  --border-hairline:var(--steel-line);

  --header-bg:rgba(246,245,240,.88);
  --overlay-scrim:rgba(20,18,15,.72);
  --glow-blend:multiply;
  --glow-opacity:.28;
  --logo-invert:0;
}