/*
 * Generated from packages/design. Do not edit by hand.
 *
 * Run `npm run tokens` to write it again; a test fails if it has drifted from the
 * tokens it came from. Every surface reads these, so a colour is decided once.
 */

:root {
  --bg: #ece0c9;
  --fg: #33291f;
  --dim: #70624c;
  --dim-2: #a3957a;
  --dim-3: #574a38;

  --card: #fbf5ea;
  --tint: #e9d9bd;
  --track: #e3d3b6;

  --day: #f4ead2;
  --night: #d8c3a0;

  --line: rgba(51, 41, 31, 0.18);
  --line-soft: rgba(51, 41, 31, 0.1);
  --hair: rgba(51, 41, 31, 0.06);

  --acc: #c85d27;
  --acc-strong: #b8531f;
  --acc-text: #8f4718;
  --acc-fill: #f7dcc2;
  --water: #1466cc;
  --water-fill: #dbe7f3;
  --on-acc: #fbf5ea;

  --sage: #5f7a3f;
  --bad: #b23a26;
  --bad-fill: #f6dcd5;
  --warn: #96620f;
  --warn-fill: #f5e6c6;
  --panel: #e4ebd2;
  --panel-fg: #3d4a2a;
  --panel-dim: #5f6a44;

  --shadow: 0 1px 3px rgba(80, 60, 35, 0.16);

  --text-micro: 12px;
  --text-small: 13px;
  --text-label: 14px;
  --text-body: 15px;
  --text-body-web: 16.5px;
  --text-subhead: 18px;
  --text-heading: 20px;
  --text-title: 22px;
  --text-display: 25px;

  --space-hair: 2px;
  --space-tight: 4px;
  --space-snug: 6px;
  --space-gap: 8px;
  --space-base: 12px;
  --space-pad: 15px;
  --space-wide: 20px;
  --space-loose: 24px;
  --space-room: 32px;

  --radius-tight: 8px;
  --radius-card: 14px;
  --radius-container: 24px;
  --radius-pill: 999px;
  --border-thick: 2px;

  --motion-quick: 120ms;
  --motion-base: 160ms;
  --motion-settle: 200ms;
  --motion-slow: 300ms;
  --motion-ease: ease;
  --motion-ease-out: ease-out;
  --motion-ease-in-out: ease-in-out;

  --layer-raised: 1;
  --layer-sticky: 2;
  --layer-dropdown: 5;
  --layer-topbar: 30;
  --layer-scrim: 40;
  --layer-drawer: 50;
  --layer-map-overlay: 60;
  --layer-toast: 100;
  --layer-lightbox: 1000;

  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --rc: var(--radius-container);
  --rs: var(--radius-card);
  --rp: var(--radius-pill);
  --bw: var(--border-thick);
  --pad: var(--space-pad);
  --gap: var(--space-gap);
}

:root[data-theme='dark'] {
  --bg: #141009;
  --fg: #f4efe4;
  --dim: #b8ab90;
  --dim-2: #8b8069;
  --dim-3: #d8cdb8;

  --card: #272019;
  --tint: #3e3529;
  --track: #3e3529;

  --day: #322a20;
  --night: #1b150d;

  --line: #554b3a;
  --line-soft: #40382c;
  --hair: rgba(244, 239, 228, 0.06);

  --acc: #ec8c42;
  --acc-strong: #ec8c42;
  --acc-text: #f6c79a;
  --acc-fill: #4a3220;
  --water: #5d9ae6;
  --water-fill: #1f2f42;
  --on-acc: #141009;

  --sage: #9db873;
  --bad: #f0917a;
  --bad-fill: #4a2a22;
  --warn: #f2cf7d;
  --warn-fill: #48381d;
  --panel: #2a2318;
  --panel-fg: #f4efe4;
  --panel-dim: #b8ab90;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #141009;
    --fg: #f4efe4;
    --dim: #b8ab90;
    --dim-2: #8b8069;
    --dim-3: #d8cdb8;

    --card: #272019;
    --tint: #3e3529;
    --track: #3e3529;

    --day: #322a20;
    --night: #1b150d;

    --line: #554b3a;
    --line-soft: #40382c;
    --hair: rgba(244, 239, 228, 0.06);

    --acc: #ec8c42;
    --acc-strong: #ec8c42;
    --acc-text: #f6c79a;
    --acc-fill: #4a3220;
    --water: #5d9ae6;
    --water-fill: #1f2f42;
    --on-acc: #141009;

    --sage: #9db873;
    --bad: #f0917a;
    --bad-fill: #4a2a22;
    --warn: #f2cf7d;
    --warn-fill: #48381d;
    --panel: #2a2318;
    --panel-fg: #f4efe4;
    --panel-dim: #b8ab90;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }
}

/* The breakpoints, for reference: they cannot be custom properties, because a media
   query may not read one. Narrow: 760px. Phone: 620px. */