/* Open Hand: design tokens.
   Every colour, font, size, space, radius, shadow and duration lives here.
   styles.css uses these names and nothing else. */

:root {
  /* Fonts. System faces only. */
  --font-sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Weights. Two, on purpose. */
  --w-regular: 400;
  --w-heavy: 700;

  /* Type scale. */
  --fs-mega: clamp(2.75rem, 11.6vw, 9.25rem);
  --fs-num: clamp(3.25rem, 9vw, 7rem);
  --fs-xl: clamp(2rem, 5.6vw, 4.25rem);
  --fs-lg: clamp(1.5rem, 3vw, 2.25rem);
  --fs-md: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-base: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.75rem;

  /* Line heights and tracking. */
  --lh-mega: 0.9;
  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --track-mega: -0.055em;
  --track-tight: -0.035em;
  --track-snug: -0.015em;
  --track-label: 0.06em;

  /* Space. A 4px step. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout. */
  --shell: 80rem;
  --gutter: clamp(1rem, 3.4vw, 3rem);
  --measure: 34rem;
  --col-no: 2.75rem;
  --col-place: 11.5rem;
  --col-kind: 5.5rem;
  --col-name: 7.5rem;
  --measure-wide: 44rem;
  --measure-narrow: 18rem;
  --field: 28rem;
  --list-min: 60vh;
  --tap: 2.75rem;
  --sticky-top: 1rem;

  /* Rules. Structure is drawn, not shaded. */
  --rule-hair: 1px;
  --rule: 2px;
  --rule-heavy: 6px;
  --rule-focus: 3px;

  /* Radius. Square, except a dot. */
  --r-0: 0;
  --r-dot: 50%;

  /* Shadows. One, hard, for things you press. */
  --shadow-none: 0 0 0 transparent;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-up: 6px 6px 0 var(--ink);
  --shadow-hard-paper: 4px 4px 0 var(--paper);
  --press: 4px;
  --lift: -2px;

  /* Motion. Four tempos, two easings. Any other duration is drift. */
  --dur-press: 90ms;
  --dur-snap: 180ms;
  --dur-settle: 380ms;
  --dur-count: 700ms;
  --stagger: 28ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.2, 1.38, 0.38, 1);
  --rise: 0.45em;
  --rise-row: 0.875rem;
  --scale-small: 0.8;
  --scale-big: 2.4;
  --quiet: 0.72;
  --lh-flat: 1;

  /* Map dots, in screen pixels. */
  --dot-off: 1.4;
  --dot-on: 3;
  --dot-active: 7;
}

/* Colour: light. Bright paper, near-black ink, one marigold. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --paper: #fcfbf7;
  --ink: #0e0d0b;
  --ink-2: #57534a;
  --hair: #d8d4c8;
  --block: #efece3;
  --land: #cfcabc;
  --accent: #ffb000;
  --accent-press: #e69a00;
  --on-accent: #0e0d0b;
}

/* Colour: dark. True black paper, the same nerve. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000000;
    --ink: #f6f3ea;
    --ink-2: #a8a295;
    --hair: #2e2b25;
    --block: #151411;
    --land: #3a362e;
    --accent: #ffb81f;
    --accent-press: #ffcb57;
    --on-accent: #0e0d0b;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000;
  --ink: #f6f3ea;
  --ink-2: #a8a295;
  --hair: #2e2b25;
  --block: #151411;
  --land: #3a362e;
  --accent: #ffb81f;
  --accent-press: #ffcb57;
  --on-accent: #0e0d0b;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-snap: 1ms;
    --dur-settle: 1ms;
    --dur-count: 1ms;
    --stagger: 0ms;
    --rise: 0em;
    --rise-row: 0rem;
  }
}