/* Shared foundation: reset, colour tokens, type scale, motion curve.
   Both screens draw their vocabulary from here. */

:root {
  /* Colour */
  --white: #ffffff;
  --ink: #0a0a0a;

  /* Landing palette — warm near-black with gold as the only accent */
  --bg-landing: #0a0806;
  --panel: #0d0b09;
  --cream: #f7f2e9;
  --gold: #c9a063;
  --gold-bright: #e6c88f;
  --gold-line: rgba(201, 160, 99, 0.32);
  --muted: rgba(255, 255, 255, 0.68);

  /* Gold at fixed strengths. One value per role, so a border always reads
     as a border — the palette had drifted to twenty arbitrary alphas for
     what were only five distinct jobs. */
  --gold-wash: rgba(201, 160, 99, 0.06); /* tinted fills */
  --gold-edge: rgba(201, 160, 99, 0.18); /* quiet dividers */
  --gold-rule: rgba(201, 160, 99, 0.28); /* standard borders */
  --gold-live: rgba(201, 160, 99, 0.48); /* hover / active borders */
  --gold-hot: rgba(246, 226, 184, 0.85); /* highlights, lit edges */

  /* Interaction timing. Slower than a default, so response reads as
     considered rather than twitchy. */
  --hover: 260ms;

  /* Type
     --font-mark is used for the LUMIQ wordmark on BOTH screens, so the
     logo can travel through the curtain as one element rather than
     being cross-faded between two different faces. */
  --font-mark: 'Jost', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Jost', system-ui, -apple-system, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Tracking — capitals are widely spaced, sentence case is not.
     This contrast is the whole type system of the Starting Page. */
  --track-label: 0.34em;
  --track-display: 0.18em;
  --track-body: 0.01em;

  /* Motion — one shared curve for everything on the site, so no
     single element ever reads as animating on its own. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Vertical scroll is the transition's input now — ScrollTrigger pins the
     stage and scrubs the curtain against it. */
  overflow-x: hidden;
}