/* Design tokens. Never hardcode a colour, size or duration outside this file.

   Dark only — ADR-0002. The ground is pulled a few degrees toward the brand
   hue rather than being neutral black, so glow, haze and the WebGL backdrop
   sit ON the page instead of floating above a dead grey.

   HOUSE RULE: there is no letter-spacing token, because the site uses none.
   Separation is solved with size, weight, colour, margin — and, on the display
   face, the font's own width axis. */

:root {
  /* ------------------------------------------------------------- 1. Brand */
  --brand: #615fff;
  --brand-lift: #8b89ff;
  --brand-deep: #4340d6;
  --brand-ink: #b9b8ff;
  --brand-wash: rgba(97, 95, 255, 0.12);
  --brand-line: rgba(97, 95, 255, 0.34);
  --brand-glow: rgba(97, 95, 255, 0.45);

  /* ---------------------------------------------------------- 2. Surfaces */
  /* Violet-cast near-blacks, darkest first. */
  --bg: #07070d;
  --bg-lift: #0a0a12;
  --bg-deep: #040409;
  --surface: #0c0c15;
  --surface-1: #12131e;
  --surface-2: #191a28;
  --surface-3: #212337;

  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-bright: rgba(255, 255, 255, 0.32);

  /* -------------------------------------------------------------- 3. Ink */
  /* Measured against --bg (#07070d), not chosen by eye:
       --ink-2  8.5:1  body copy anywhere
       --ink-3  5.0:1  secondary copy, still passes 4.5:1 for normal text
       --ink-4  3.3:1  micro-labels and decoration only, never a sentence
     --ink-3 used to be #6d7489, which measured 4.0:1 and was carrying FAQ
     answers. Re-measure if the ground ever changes. */
  --ink: #ffffff;
  --ink-2: #a6adc2;
  --ink-3: #858ca1;
  --ink-4: #646b80;

  /* ------------------------------------------------- 4. Data / unit states */
  /* The app's own dashboard colours. These are semantic, not decorative. */
  /* The ground the app's own screens are drawn on, sampled from
     img/screen-dashboard.png. Nothing draws on it at present: the desktop shot
     now arrives as a whole render with no letterbox to fill. Kept because the
     next partial screenshot will need the app's own colour behind it, not ours. */
  --app-ground: #0a0f18;

  --available: #4a5163;
  --available-lift: #737c93;
  --blocked: #ffb23d;
  --sold: #46e08c;
  --overdue: #ff5f6d;

  /* ------------------------------------------------------------- 5. Type */
  --font-display: 'Archivo', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Display width axis. Headlines animate FROM narrow TO these on reveal. */
  --width-display: 112;
  --width-narrow: 78;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --text-lg: clamp(1.15rem, 0.7vw + 1rem, 1.4rem);
  --text-xl: clamp(1.35rem, 1.3vw + 1rem, 2rem);

  /* Display sizes scale with their CONTAINER (cqi), not the viewport, because
     the same style sits in a full-bleed hero and in a 520px column, and a
     headline that wraps inside its overflow:hidden mask breaks the reveal.
     Containers declare container-type: inline-size in base.css.

     The cqi multipliers are not taste, they are arithmetic. A line must not
     wrap inside its overflow:hidden mask, so each size is set to fit the
     LONGEST line the site actually sets at that size. Archivo at wdth 112
     averages ~0.72em per uppercase character including spaces, so the ceiling
     is 100 / (characters x 0.72) cqi:
       xl  "SPREADSHEETS."   13 ch -> 10.7   set 10.2
       lg  "START KNOWING."  14 ch ->  9.9   set  9.4
       md  "MORE THAN A NAME" 16 ch ->  8.7  set  8.2
       sm  "JOIN THE WAITLIST" 17 ch -> 8.2  set  7.8
     Re-check these before authoring a longer line. */
  --display-xs: clamp(1.05rem, 3.6cqi, 1.65rem);
  --display-sm: clamp(1.3rem, 7.8cqi, 2.4rem);
  --display-md: clamp(1.7rem, 8.2cqi, 4rem);
  --display-lg: clamp(2.2rem, 9.4cqi, 6.4rem);
  --display-xl: clamp(2.2rem, 10.2cqi, 9rem);

  --leading-display: 0.88;
  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ------------------------------------------------------------ 6. Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(5rem, 11vw, 11rem);

  /* ------------------------------------------------------------ 7. Shape */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --shadow-device: 0 48px 110px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-panel: 0 2px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 80px rgba(0, 0, 0, 0.5);

  /* ----------------------------------------------------------- 8. Layout */
  --container: 82rem;
  --container-wide: 94rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;

  /* ----------------------------------------------------------- 9. Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --dur-curtain: 900ms;

  /* Written by JS every frame; read by anything that wants to lean into the
     scroll. Declared here so the fallback is "perfectly still". */
  --scroll-velocity: 0;
  --pointer-x: 0.5;
  --pointer-y: 0.5;
}