/* Copied verbatim from src/styles/tokens.css by scripts/build-docs.mjs.
   Edit that file, not this one. */
/*
 * Design tokens. Mobile-first: no fixed pixel widths, no logic keyed to
 * viewport size. Desktop later becomes a layout project, not a rewrite.
 *
 * The theme: emerald on sage. The ground is a soft green-tinted neutral so
 * raised white cards read as objects; the accent is a rich market green that
 * carries every interactive voice (primary buttons, inline actions, the
 * selected tab, the + gradient). Change the palette here and everything —
 * including antd-mobile, via adm-theme.css — follows. The sage is the
 * emerald's own cast: every other workspace tone (below) casts its neutrals
 * the same faint amount toward its own hue, so a blue workspace sits on a
 * faintly blue page rather than a green one.
 */
:root {
  color-scheme: light dark;

  --bg: #f4f6f3;
  --surface: #e9ede9;
  --surface-raised: #ffffff;
  --border: #dde3dd;
  --text: #161c18;
  --text-muted: #5c6961;
  --text-faint: #8b968e;
  --accent: #0e8a5f;
  --accent-ink: #ffffff;
  --accent-soft: #dcf1e6;
  --accent-grad: linear-gradient(135deg, #12b377, #0b8f83);
  --auto-add: #8a6116;
  --auto-add-soft: #f7eed9;
  --danger: #b03434;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius: 0.625rem;
  --radius-lg: 1rem;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;

  /* Comfortable one-handed tap target while pushing a cart. */
  --tap: 2.75rem;
  --content-max: 34rem;

  /* The fixed bottom tab bar's height; content clearance and anything floated
     above the bar (the undo snackbar) are computed from this one number. */
  --tab-bar-h: 3rem;
  /* The screen header's height, for the same reason: a writing surface that
     fills what is left has to subtract it, and guessing would drift. */
  --screen-head-h: 3rem;
  /* The workspace bar above every screen when the account is in more than
     one workspace — 1.75rem and its bottom rule — for the same reason again:
     the note editor subtracts it while the bar is drawn, and a note page
     that forgot it was taller than the viewport by exactly this much, with
     a scrollbar that scrolled nothing but the bar. */
  --ws-bar-h: calc(1.75rem + 1px);
  /* The detected-facts strip under the note editor. Fixed, like the header's,
     because the editor's height subtracts it: a strip that wrapped would move
     the writing surface under the writer. */
  --fact-row-h: 3rem;
  /* The shelf's CLOSED line under the editor — the toggle that unfolds the
     strips above — and the gap it keeps to the editor. Shorter than the
     strip it opens: a folded note is the common case, and every rem here is
     a rem the writing surface pays on every note that carries anything. The
     chip inside is 2rem, the compact tap the tool bar's chips already use,
     and the stack's bottom padding keeps 2rem of ground between it and the
     tab bar so a thumb aiming at it does not land on a tab. */
  --shelf-row-h: 2.25rem;
  --shelf-gap: var(--space-2);
  /* The photo thumbnails under the note editor, same bargain as the strip
     above: fixed, because the writing surface subtracts it. One row, tall
     enough that a receipt is recognisable rather than a smudge. */
  --photo-row-h: 4.5rem;
  /* Motion, one vocabulary. Snappy means short, decelerating on the way in,
     quicker on the way out: a fold you dismiss is gone before you notice it
     going. No bounce and no overshoot — motion here is furniture moving, never
     a notification, for the same reason lateness is never marked. `--dur-open`
     and `--dur-close` MUST match OPEN_MS and CLOSE_MS in
     src/components/motion.ts: anything that unmounts after a close (a fold's
     body, a toast) does so on a timer of that length, never on
     `transitionend`. */
  --dur-fast: 120ms; /* a caret turning, a press wash fading after release */
  --dur-open: 200ms; /* a fold opening */
  --dur-close: 150ms; /* a fold closing — faster: the eye has already left */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* opening: arrives fast, settles */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* closing: leaves without ceremony */
  /* The photo row's OUTER height: the thumbnails plus, on fine pointers
     only, the lane its scrollbar rides in. The editor's height arithmetic
     subtracts this one, so the lane appearing never squeezes the page. */
  --photo-row-outer: var(--photo-row-h);
  --shadow-soft: 0 1px 2px rgb(15 40 28 / 0.05), 0 2px 8px rgb(15 40 28 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1210;
    --surface: #171c18;
    --surface-raised: #1e2420;
    --border: #2c332e;
    --text: #edf2ee;
    --text-muted: #9faba3;
    --text-faint: #6f7a72;
    --accent: #46c68f;
    --accent-ink: #06281a;
    --accent-soft: #17362a;
    --accent-grad: linear-gradient(135deg, #3fd191, #2aa4a0);
    --auto-add: #d9b562;
    --auto-add-soft: #2b2517;
    --danger: #de8f8f;
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.25);
  }
}

/*
 * Workspace tones. Six settings of the four accent tokens, one per named
 * tone, applied by `data-ws` on the document root for the workspace on
 * screen (App.tsx) and on any element that should wear a tone of its own —
 * the picker's dots, the swatch row. Emerald is the default above and the
 * solo workspace's; the rest are the shared workspaces', by position until
 * a person picks. Same lightness and chroma as the emerald in each theme,
 * so buttons, chips and the active tab keep their contrast whatever the
 * hue — see DECISIONS, "A workspace's colour is yours".
 *
 * The neutrals follow, second block: ground, surfaces, border, the three
 * text greys and the card shadow, each the sage value with its hue turned
 * to the tone's (same OKLCH lightness and chroma, so the cast stays as faint
 * as the emerald's and every contrast holds). Emerald keeps the root values
 * — the sage IS its cast. Blue and slate share a hue and so a ground; their
 * accents differ in chroma, not in where they sit.
 */
[data-ws='emerald'] { --accent: #0e8a5f; --accent-soft: #dcf1e6; --accent-grad: linear-gradient(135deg, #12b377, #0b8f83); }
[data-ws='blue']    { --accent: #1f6cb5; --accent-soft: #dce9f7; --accent-grad: linear-gradient(135deg, #2f8ce0, #1f5ea8); }
[data-ws='purple']  { --accent: #6b4db5; --accent-soft: #e8e1f7; --accent-grad: linear-gradient(135deg, #8b68e0, #5c3ea6); }
[data-ws='rose']    { --accent: #b53a66; --accent-soft: #f7dfe8; --accent-grad: linear-gradient(135deg, #e0538c, #a63060); }
[data-ws='rust']    { --accent: #b3481c; --accent-soft: #f7e3d9; --accent-grad: linear-gradient(135deg, #e0662d, #a6401a); }
[data-ws='slate']   { --accent: #4b6178; --accent-soft: #e1e7ee; --accent-grad: linear-gradient(135deg, #6c87a8, #435b78); }

[data-ws='blue']   { --bg: #f3f6f8; --surface: #e9ecf0; --border: #dce2e8; --text: #161b20; --text-muted: #5d6671; --text-faint: #8b949d; --shadow-soft: 0 1px 2px rgb(20 35 52 / 0.05), 0 2px 8px rgb(20 35 52 / 0.06); }
[data-ws='purple'] { --bg: #f5f5f8; --surface: #ecebf0; --border: #e1e0e8; --text: #1a191f; --text-muted: #656370; --text-faint: #93919d; --shadow-soft: 0 1px 2px rgb(35 31 51 / 0.05), 0 2px 8px rgb(35 31 51 / 0.06); }
[data-ws='rose']   { --bg: #f8f4f5; --surface: #f0eaeb; --border: #e8dee0; --text: #1f181a; --text-muted: #706164; --text-faint: #9d8f92; --shadow-soft: 0 1px 2px rgb(50 26 33 / 0.05), 0 2px 8px rgb(50 26 33 / 0.06); }
[data-ws='rust']   { --bg: #f8f4f3; --surface: #f0eae8; --border: #e8dfdc; --text: #1f1916; --text-muted: #70625d; --text-faint: #9d8f8b; --shadow-soft: 0 1px 2px rgb(50 28 19 / 0.05), 0 2px 8px rgb(50 28 19 / 0.06); }
[data-ws='slate']  { --bg: #f3f6f8; --surface: #e8ecf0; --border: #dce2e8; --text: #161b20; --text-muted: #5d6671; --text-faint: #8b949d; --shadow-soft: 0 1px 2px rgb(19 36 52 / 0.05), 0 2px 8px rgb(19 36 52 / 0.06); }

@media (prefers-color-scheme: dark) {
  [data-ws='emerald'] { --accent: #46c68f; --accent-ink: #06281a; --accent-soft: #17362a; --accent-grad: linear-gradient(135deg, #3fd191, #2aa4a0); }
  [data-ws='blue']    { --accent: #5da9f0; --accent-ink: #061f38; --accent-soft: #17293a; --accent-grad: linear-gradient(135deg, #64b5f5, #3b8bd6); }
  [data-ws='purple']  { --accent: #aa8ef0; --accent-ink: #1e1040; --accent-soft: #2a2140; --accent-grad: linear-gradient(135deg, #b79cf5, #8c6cd6); }
  [data-ws='rose']    { --accent: #f08cb1; --accent-ink: #3a0a1c; --accent-soft: #3a1f2a; --accent-grad: linear-gradient(135deg, #f5a2c1, #d66c92); }
  [data-ws='rust']    { --accent: #f0955e; --accent-ink: #3a1a08; --accent-soft: #3a2517; --accent-grad: linear-gradient(135deg, #f5a874, #d67a3e); }
  [data-ws='slate']   { --accent: #9eb5cd; --accent-ink: #0e1a26; --accent-soft: #202b36; --accent-grad: linear-gradient(135deg, #b1c5d9, #7e98b1); }

  [data-ws='blue']   { --bg: #0f1114; --surface: #171b1f; --surface-raised: #1e2328; --border: #2c3238; --text: #edf1f6; --text-muted: #a0a9b3; --text-faint: #6f7881; }
  [data-ws='purple'] { --bg: #111114; --surface: #1b1a1f; --surface-raised: #222127; --border: #313037; --text: #f0f0f5; --text-muted: #a8a6b2; --text-faint: #777581; }
  [data-ws='rose']   { --bg: #141011; --surface: #1f191a; --surface-raised: #272022; --border: #372e30; --text: #f5eef0; --text-muted: #b2a3a6; --text-faint: #807376; }
  [data-ws='rust']   { --bg: #14100f; --surface: #1f1917; --surface-raised: #27211e; --border: #372f2c; --text: #f5efed; --text-muted: #b2a49f; --text-faint: #81736f; }
  [data-ws='slate']  { --bg: #0f1114; --surface: #171b1f; --surface-raised: #1e2328; --border: #2c3237; --text: #edf1f5; --text-muted: #9fa9b2; --text-faint: #6f7881; }
}

/* Motion stands down everywhere at once: a zero duration keeps every
   transition's end state and drops the travel. Timers keyed to these tokens
   (a fold's unmount) read the setting themselves and go to zero too. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-open: 0ms;
    --dur-close: 0ms;
  }
}