/* Design tokens: a studio-lit 3D viewport. Axis colours (X red, Y green, Z blue) are marks and lines, not text. */
:root {
  color-scheme: light;

  /* Palette. The page is a 3D viewport: a studio backdrop and the three axis colours (X red, Y green, Z blue),
     which are marks and lines rather than text. Dark is the default theme; see :root[data-theme='dark']. */
  --paper: #f4f6f8;
  --ink: #15181d;
  --muted: #5b6571;
  --x: #e0384b;
  --y: #5aa300;
  --z: #2c63e0;
  --z-text: #2455c9;

  /* Surfaces */
  --hero-top: #f5f7fa;
  --hero-bottom: #e6e9ee;
  --stage-top: #d8dde4;
  --stage-bottom: #cdd3db;
  --plate-a: #f3f5f8;
  --plate-b: #e6e9ed;
  --plate-c: #d3d9e0;
  --pill-bg: rgba(255, 255, 255, 0.72);
  --disc-bg: rgba(244, 246, 248, 0.62);
  --topbar-bg: rgba(244, 246, 248, 0.86);
  --grid: rgba(21, 24, 29, 0.2);
  --img-shadow: rgba(21, 24, 29, 0.28);
  --dot-glow: rgba(90, 163, 0, 0.2);

  /* Voxel covers of projects without a demo image */
  --cube-top: #f9fafb;
  --cube-left: #d6dbe2;
  --cube-right: #b8c0cb;
  --cube-edge: rgba(21, 24, 29, 0.16);
  --cover-grid: rgba(21, 24, 29, 0.09);

  /* The closing contact band is the inverse of the page */
  --band-bg: #15181d;
  --band-ink: #f4f6f8;

  /* Light type on a dark ground looks heavier, so the display weight is eased off there */
  --name-weight: 800;
  --name-tracking: -0.048em;

  /* Derived from the palette above, so they follow the theme */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --ring: color-mix(in srgb, var(--ink) 9%, transparent);
  --horizon: color-mix(in srgb, var(--ink) 22%, transparent);
  --chip: color-mix(in srgb, var(--ink) 7%, transparent);
  --ink-2: color-mix(in srgb, var(--ink) 86%, transparent);
  --ink-3: color-mix(in srgb, var(--ink) 76%, transparent);
  --ink-line: color-mix(in srgb, var(--ink) 32%, transparent);
  --band-2: color-mix(in srgb, var(--band-ink) 70%, transparent);
  --band-3: color-mix(in srgb, var(--band-ink) 58%, transparent);
  --band-line: color-mix(in srgb, var(--band-ink) 22%, transparent);
  --band-underline: color-mix(in srgb, var(--band-ink) 38%, transparent);

  --radius-plate: 18px;
  --radius-control: 10px;
  --shell: min(1240px, calc(100% - 48px));
  --gutter: clamp(20px, 3vw, 32px);
  --section: clamp(84px, 11vw, 148px);

  --font-body: var(--font-text), 'Segoe UI', system-ui, sans-serif;
  --font-head: var(--font-display), 'Segoe UI', system-ui, sans-serif;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #1c2026;
  --ink: #e9edf2;
  --muted: #9aa5b1;
  --x: #ff5a6e;
  --y: #86d62c;
  --z: #5b8dff;
  --z-text: #8db0ff;

  --hero-top: #282d35;
  --hero-bottom: #1c2026;
  --stage-top: #14171b;
  --stage-bottom: #0f1114;
  --plate-a: #363c46;
  --plate-b: #2a2f37;
  --plate-c: #1f2329;
  --pill-bg: rgba(255, 255, 255, 0.07);
  --disc-bg: rgba(40, 45, 53, 0.72);
  --topbar-bg: rgba(28, 32, 38, 0.86);
  --grid: rgba(255, 255, 255, 0.15);
  --img-shadow: rgba(0, 0, 0, 0.55);
  --dot-glow: rgba(134, 214, 44, 0.24);

  --cube-top: #e9edf2;
  --cube-left: #9aa5b3;
  --cube-right: #69737f;
  --cube-edge: rgba(0, 0, 0, 0.4);
  --cover-grid: rgba(255, 255, 255, 0.09);

  --band-bg: #e8ebef;
  --band-ink: #15181d;

  --name-weight: 700;
  --name-tracking: -0.036em;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--z); color: #fff; }
:focus-visible { outline: 3px solid var(--z); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}