/*
 * Bind design tokens (the bead ring, ADR 0045). Reference tokens, then semantic tokens, then motion, then the mark states.
 * Contrast is WCAG 2.x relative luminance and is listed in BRAND.md section D. APCA was not computed.
 * Colour never carries a state alone: every status also has a label, and the bead's position repeats it.
 */
@font-face { font-family: "Geist"; src: url("fonts/Geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* Reference: light, "bone" */
  --bone: #F5F0E6;
  --flour: #FBF8F2;
  --crust: #E8E0D0;
  --ink: #1A1612;
  --char: #5E5648;
  --copper: #A94F25;
  --saffron-ink: #7A5200; --saffron-tint: #F6E3B4; --saffron: #B07A00;
  --herb-ink: #1F6A3E;    --herb-tint: #D5EBDD;    --herb: #1F6A3E;
  --slate-ink: #3F5A7A;   --slate-tint: #D9E3EF;   --slate: #3F5A7A;
  --tomato-ink: #A8321C;  --tomato-tint: #F6D9D2;  --tomato: #A8321C;

  /* Semantic */
  --bg: var(--bone);
  --surface: var(--flour);
  --border: var(--crust);
  --text: var(--ink);
  --text-muted: var(--char);
  --accent: var(--copper);
  --status-pending: var(--saffron);  --status-pending-text: var(--saffron-ink);  --status-pending-tint: var(--saffron-tint);
  --status-approved: var(--herb);    --status-approved-text: var(--herb-ink);    --status-approved-tint: var(--herb-tint);
  --status-held: var(--slate);       --status-held-text: var(--slate-ink);       --status-held-tint: var(--slate-tint);
  --status-refused: var(--tomato);   --status-refused-text: var(--tomato-ink);   --status-refused-tint: var(--tomato-tint);
  --focus-ring: 2px solid var(--ink);

  /* Type */
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion: the Corporate archetype (docs/brand/BRAND.md section 6). Transform and opacity only. */
  --dur-instant: 0ms;
  --dur-fast: 120ms;     /* press, toggle, hover in */
  --dur-base: 200ms;     /* chip and badge change, row enter */
  --dur-slow: 320ms;     /* panel, dialog */
  --dur-reveal: 520ms;   /* the mark, first load only */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasis: cubic-bezier(0.05, 0.7, 0.1, 1);
  --stagger: 40ms;       /* list entry; total under 400ms */
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110E; --surface: #1D1914; --border: #2E2822; --text: #F2EBDD; --text-muted: #A89E8E; --accent: #E08A57;
    --status-pending: #F2C14E;  --status-pending-text: #F2C14E;  --status-pending-tint: #3A2D10;
    --status-approved: #6FCB93; --status-approved-text: #6FCB93; --status-approved-tint: #12301F;
    --status-held: #8FB0D6;     --status-held-text: #8FB0D6;     --status-held-tint: #1A2638;
    --status-refused: #F08470;  --status-refused-text: #F08470;  --status-refused-tint: #3B1812;
    --focus-ring: 2px solid var(--text);
  }
}
:root[data-theme="dark"] {
  --bg: #14110E; --surface: #1D1914; --border: #2E2822; --text: #F2EBDD; --text-muted: #A89E8E; --accent: #E08A57;
  --status-pending: #F2C14E;  --status-pending-text: #F2C14E;  --status-pending-tint: #3A2D10;
  --status-approved: #6FCB93; --status-approved-text: #6FCB93; --status-approved-tint: #12301F;
  --status-held: #8FB0D6;     --status-held-text: #8FB0D6;     --status-held-tint: #1A2638;
  --status-refused: #F08470;  --status-refused-text: #F08470;  --status-refused-tint: #3B1812;
  --focus-ring: 2px solid var(--text);
}

/*
 * The mark as a status indicator. Put class "bind-mark" on an inline <svg> with a .ring path and a .clasp circle (the bead), and
 * set data-state to one of: idle, pending, approved, held, refused. The bead sits on the line from the ring's centre through
 * one o'clock; its distance from the seat says the state, its colour agrees, and a text label always sits beside it.
 *   idle      seated, copper
 *   pending   11 units out, saffron          "Waiting for you"
 *   approved  seated, herb                   "Done"
 *   held      4 units out, slate             "Paused"
 *   refused   11 units out and 7 right, 4 down, tomato   "Refused"
 * Never set "approved" before the server has confirmed it.
 */
.bind-mark .ring { stroke: var(--text); }
.bind-mark .clasp { fill: var(--accent); stroke: none; transform-box: view-box;
  transition: transform var(--dur-slow) var(--ease-standard), fill var(--dur-base) var(--ease-standard); }
.bind-mark[data-state="pending"]  .clasp { fill: var(--status-pending);  transform: translate(5.5px, -9.5px); }
.bind-mark[data-state="approved"] .clasp { fill: var(--status-approved); transform: none; }
.bind-mark[data-state="held"]     .clasp { fill: var(--status-held);     transform: translate(2px, -3.5px); }
.bind-mark[data-state="refused"]  .clasp { fill: var(--status-refused);  transform: translate(12.5px, -5.5px); }
@media (prefers-reduced-motion: reduce) {
  .bind-mark .clasp { transition-duration: 1ms; }
}