/* ==========================================================================
   Z-INDEX LAYERS
   0   - Canvas background
   10  - Center logo (behind page content)
   100 - Page content
   200 - Chrome (nav, footer, controls)
   210 - Dropdowns (lang menu)
   ========================================================================== */

* { margin: 0; padding: 0; }

:root {
  --cursor-light: url('../cursor-light.svg') 12 12;
  --cursor-dark: url('../cursor-dark.svg') 12 12;
  --mono-font: 'Departure Mono', 'SFMono-Regular', ui-monospace, monospace;
  --serif-font: 'PlantinNow', 'Plantin MT Pro', 'Plantin MT Std', 'Plantin', Georgia, serif;

  /* Primitive type scale. Components consume these shared steps instead of
     introducing page-specific pixel sizes. */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.625rem;
  --font-size-3xl: 2.25rem;

  /* Semantic roles. Reading and display text scale continuously; interface
     and form text stay stable across viewport breakpoints. */
  --text-ui: var(--font-size-sm);
  --text-meta: var(--font-size-sm);
  --text-form: var(--font-size-sm);
  --text-body: var(--font-size-sm);
  --text-reading: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --text-title: var(--font-size-lg);
  --text-hero: clamp(1.25rem, 0.875rem + 1.5vw, 2.5rem);
  --leading-ui: 1.25;
  --leading-body: 1.6;
  --leading-tight: 1.15;

  /* The shader's home camera puts the horizon 39.4309% of the canvas height
     above its bottom edge. JavaScript replaces this fallback with the exact
     rendered pixel position and keeps it in sync while the camera moves. */
  --scene-horizon-from-bottom: 39.4309vh;
  --hero-horizon-gap: 2.5rem;

  --theme-transition-duration: 900ms;
  /* Exactly matches the shader's smoothstep easing. */
  --theme-transition-easing: cubic-bezier(0.333333, 0, 0.666667, 1);

  /* One responsive frame controls every outer alignment. Components should
     consume these tokens rather than introducing their own viewport offsets. */
  --frame-inline: 75px;
  --frame-block: 75px;
  --frame-content-top: calc(var(--frame-block) + 76px);
  --frame-content-bottom: calc(var(--frame-block) + 100px);
  --frame-chrome-fade: 40px;
  --chrome-surface: 250, 249, 246;
  --color-text-day: #353431;
}

@property --page-veil-r {
  syntax: '<number>';
  inherits: true;
  initial-value: 250;
}

@property --page-veil-g {
  syntax: '<number>';
  inherits: true;
  initial-value: 249;
}

@property --page-veil-b {
  syntax: '<number>';
  inherits: true;
  initial-value: 246;
}

@supports (height: 100dvh) {
  :root {
    --scene-horizon-from-bottom: 39.4309dvh;
  }
}

html:has(body:not(.theme-night)),
body:not(.theme-night) {
  --cursor-light: url('../cursor-dark.svg') 12 12;
  --cursor-dark: url('../cursor-dark.svg') 12 12;
}

html, body {
  cursor: var(--cursor-light), auto;
  background: #b8b8b8;
}

html {
  font-size: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--mono-font);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.theme-night, .theme-night body {
  background: #1a1a1a;
}

* { cursor: inherit; }

.svg-definitions {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

a {
  cursor: var(--cursor-light), pointer;
}

a:hover {
  cursor: var(--cursor-dark), pointer;
}

.theme-night a {
  cursor: var(--cursor-dark), pointer;
}

.theme-night a:hover {
  cursor: var(--cursor-light), pointer;
}