/* Shelltown website tokens.
   The colours are copied from the app, not invented: the master palette of web/src/pixel/palette.ts (eight hue-shifted
   ramps) and the roles of web/src/styles/tokens.css (DESIGN.md › Colors). When the app's palette changes, change it there
   first, then copy the values here. site/tools/art.mjs draws the pixel art with the same steps. */
:root {
  color-scheme: dark;

  /* Surfaces: the onyx ramp, from the most recessed to the most raised. */
  --bg: #060f10;          /* onyx 0: the stage */
  --well: #081515;        /* onyx 1: wells, the terminal */
  --surface: #0c1d1b;     /* onyx 2: plates */
  --surface-2: #132420;   /* onyx 3: hover, fields */

  /* Text: three levels (stone ramp), each 4.5:1 or more on every surface. */
  --text: #f5eeda;        /* stone 5, ivory */
  --text-2: #c3c2b0;      /* stone 3 */
  --text-3: #a3a699;      /* stone 2 */

  /* Brass: the frame, the one main action, the selection. */
  --accent: #d4a64c;      /* brass 3 */
  --accent-hi: #f6d94f;   /* brass 4 */
  --on-fill: #060f10;     /* onyx 0: text on brass */

  /* States, always doubled by a shape and a word: work (disc), rest (ring), waiting (diamond). */
  --work: #74e29f;        /* jade 4 */
  --rest: #7498d9;        /* steel 4 */
  --wait: #f46842;        /* brick 4, vermilion */

  /* Solid fills with white text: the notch's decisions. */
  --solid-ok: #067d6e;    /* jade 2 */
  --solid-ok-edge: #025653; /* jade 1 */
  --solid-danger: #af3e30; /* brick 2 */
  --solid-danger-edge: #7b2d29; /* brick 1 */
  --on-solid: #ffffff;
  --path: #97bfe6;        /* steel 5: field names on the notch */
  --notch: #000000;       /* the hardware notch, the one pure black */

  /* Hairlines and veils: ivory, never pure white. */
  --line: rgb(245 238 218 / 9%);
  --veil-2: rgb(245 238 218 / 7%);
  --veil-4: rgb(245 238 218 / 18%);
  --shade-2: rgb(6 15 16 / 40%);
  --edge: rgb(212 166 76 / 20%);
  --edge-dim: rgb(212 166 76 / 30%);
  --accent-shade: rgb(116 75 32 / 50%);

  /* Corners and borders, as in the app (decision 0037): no smooth radius, no blurred shadow. A plate wears a ring of four
     one-pixel bars laid outside its box, so each corner loses one pixel; one interface pixel is --px. */
  --px: 2px;
  --frame: color-mix(in srgb, var(--accent) 26%, var(--surface));
  --frame-strong: color-mix(in srgb, var(--accent) 58%, var(--surface));
  --ring: 0 calc(-1 * var(--px)) 0 0 var(--frame), 0 var(--px) 0 0 var(--frame), calc(-1 * var(--px)) 0 0 0 var(--frame), var(--px) 0 0 0 var(--frame);
  --ring-strong: 0 calc(-1 * var(--px)) 0 0 var(--frame-strong), 0 var(--px) 0 0 var(--frame-strong), calc(-1 * var(--px)) 0 0 0 var(--frame-strong), var(--px) 0 0 0 var(--frame-strong);
  --bevel: inset 0 1px 0 var(--veil-2), inset 0 calc(-1 * var(--px)) 0 var(--shade-2);
  --bevel-fill: inset 0 1px 0 var(--veil-4), inset 0 calc(-1 * var(--px)) 0 var(--accent-shade);
  --px-disc: polygon(25% 0, 75% 0, 75% 12.5%, 87.5% 12.5%, 87.5% 25%, 100% 25%, 100% 75%, 87.5% 75%, 87.5% 87.5%, 75% 87.5%, 75% 100%, 25% 100%, 25% 87.5%, 12.5% 87.5%, 12.5% 75%, 0 75%, 0 25%, 12.5% 25%, 12.5% 12.5%, 25% 12.5%);
  --px-diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

  /* Type: the app's two voices, system fonts only (nothing is downloaded). */
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Motion: short, ease-out, only to show a state. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}