/* Design tokens. Owner: foundation. Lanes request changes; they do not edit this file.
   The site has no theme toggle: the sketchbook page sets the palette. html[data-page="night"] is the
   Chanukah room, html[data-page="day"] is the studio. Reasons for every value are in DESIGN.md. */
:root {
  /* night page */
  --night: #0E1440;
  --night-2: #172066;
  --ultra: #2340D8;
  --wax: #EEE9F8;
  --wax-soft: #B9B6DE;   /* 9.1:1 on --night */
  --gold: #F2C14E;       /* 10.5:1 on --night */
  --flame: #FF6B4A;      /* drawings only */

  /* day page */
  --paper: #F1ECE3;
  --paper-2: #E6DED0;
  --ink: #1E1A22;
  --ink-soft: #57505E;   /* 6.6:1 on --paper */
  --plum: #5B3A8C;       /* 7.4:1 on --paper */
  --crimson: #B3202D;    /* 5.7:1 on --paper, and paper on crimson */

  /* watercolour, inside drawings only, never on text or controls */
  --wash-vine: #3F7A45;
  --wash-orange: #D9581F;
  --wash-violet: #7A54C2;

  /* type */
  --hand: "Patrick Hand SC", "Marker Felt", "Comic Sans MS", ui-rounded, system-ui, sans-serif;
  --book: "Newsreader", "Iowan Old Style", Georgia, serif;
  --script: "Sacramento", "Snell Roundhand", "Segoe Script", cursive;
  --step--1: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-0: clamp(1.06rem, 1.02rem + 0.2vw, 1.17rem);
  --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --step-2: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* space: a scale, used at different levels on purpose (RHYTHM 2) */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6.5rem;

  /* shape */
  --r-drawn: 4px 14px 6px 12px / 12px 6px 14px 4px;
  --r-magnet: 16px;
  --r-control: 8px;
  --magnet-shadow: 0 2px 0 rgb(0 0 0 / 0.35), 0 18px 30px -14px rgb(0 0 0 / 0.8);

  /* motion: CSS tokens from the AgentZ springs (see motion.js springCSS). No overshoot. */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --ease-brand: cubic-bezier(0.12, 0.72, 0.18, 1);
  --ease-exit: cubic-bezier(0.5, 0, 0.75, 0);
}

html[data-page="night"] { --bg: var(--night); --fg: var(--wax); --fg-soft: var(--wax-soft); --core: var(--ultra); --accent: var(--gold); --on-accent: var(--night); color-scheme: dark; }
html[data-page="day"]   { --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft); --core: var(--plum); --accent: var(--crimson); --on-accent: var(--paper); color-scheme: light; }