/* alders design tokens. Every colour, size and space on the site comes from here. */

/* Theme: Candlelight (default). Warm near-black, candle-cream trees, a gold flame. */
:root,
[data-theme="candle"] {
  --sky: #19140E;
  --ground: #100C08;
  --tree: #F6E6C2;     /* 14.8:1 on sky */
  --seed: #4A3F2C;     /* seedlings, deliberately quiet */
  --accent: #FFC247;   /* 11.4:1 on sky, used for one thing at a time */
  --text: #F6E6C2;     /* 15.8:1 on ground */
  --muted: #B3A585;    /* 8.0:1 on ground */
}

/* Theme: Amber dusk, temperate. Reached by the switch or ?theme=dusk. Peat-brown dusk, cream trees, amber light. */
[data-theme="dusk"] {
  --sky: #2B2422;
  --ground: #1A1514;
  --tree: #F7DFC3;     /* 11.8:1 on sky */
  --seed: #5E504A;
  --accent: #FFB347;   /* 8.6:1 on sky */
  --text: #F7DFC3;     /* 14.0:1 on ground */
  --muted: #B9A79A;    /* 7.8:1 on ground */
}

/* Theme: Candlelight, light. Reached by the switch (rightmost tree) or ?theme=light.
   Tuned for comfort, not maximum contrast: warm linen sky, deeper parchment ground (earth below sky, as in
   Candlelight), cocoa ink instead of black. Trees sit a step lighter than the slogan so the slogan leads. */
[data-theme="candle-light"] {
  --sky: #EEE5D3;
  --ground: #E5D7BE;
  --tree: #67574A;     /* 5.5:1 on sky */
  --seed: #C9BAA3;     /* seedlings, deliberately quiet */
  --accent: #864400;   /* 5.2:1 on ground, 5.9:1 on sky */
  --text: #514236;     /* 6.8:1 on ground */
  --muted: #605043;    /* 5.4:1 on ground */
}

:root {
  /* Type */
  --font-sans: "Geist", "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-hero: clamp(48px, 8vw, 104px);
  --tracking-hero: -0.04em;
  --tracking-hero-narrow: -0.03em;   /* at phone sizes -0.04em packs the letters too tightly */
  --tracking-wordmark: -0.02em;
  --hang: -0.04em;                   /* pulls the slogan's "G" back onto the text edge (side bearing) */

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Lines */
  --stroke: 1.1;
  --radius: 0;

  /* Motion */
  --bud-duration: 500ms;   /* leaves, after the branches; branch timings come from build.py */
  --sway-duration: 11s;
  --theme-duration: 400ms;
}