/* tokens.css - Sequence Diagram rebuild 2026-09-17; lifted from mock-shared.css */
:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #171c21;        /* cool ink, not pure black */
  --card: #f2f5f7;              /* cool paper: strips, the insert tray, chip grounds */
  --card-foreground: #171c21;
  --muted: #e8edf0;             /* hover fills, the zoom group, the selected line wash */
  --muted-foreground: #4f5d69;
  --plate: #dfe5e9;             /* the drafting ground the sheet lies on */
  --sheet: #ffffff;             /* the sheet itself: this is the exported artefact, so it
                                   stays paper white in both themes */
  --sheet-edge: #c6cfd5;
  --primary: #0e7c9a;           /* taken from the product mark; the only accent, and it
                                   appears on exactly two things: Export SVG, the live theme */
  --primary-foreground: #ffffff;
  --primary-hover: #0b6980;
  --attention: #b3261e;         /* a STATE colour, never an accent: it is allowed on a 2px
                                   rule, a glyph and a stamp outline, never as a wide fill */
  --attention-soft: #fbeeec;
  --border: #d5dde2;
  --rule: #171c21;              /* the ink rule under a live control: ink, never the accent */
  --ring: var(--primary);
  --gutter-ink: #5f6d78;        /* line numbers */
  --code-ink: #171c21;
  --handle-bg: #ffffff;
  --handle-ink: #171c21;
  --shadow-raised: 0 1px 2px rgb(20 26 32 / .12);
  --shadow: 0 10px 24px -12px rgb(20 26 32 / .38);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --border-width: var(--hair);
  --hair: 1px;
  --duration-fast: 120ms;
  --duration-slide: 180ms;
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* The drawing's own colours. This is CONTENT, not chrome: the sheet shows what Mermaid
     renders under the live theme, and the product never restyles that output. Keeping them
     here means no raw hex escapes the token block; they are not part of the accent budget. */
  --dia-actor: #ececff;
  --dia-actor-edge: #9370db;
  --dia-actor-ink: #4c4494;
  --dia-line: #2f343a;
  --dia-ink: #171c21;
  --dia-lifeline: #9aa3ab;
  --dia-note: #fff5ad;
  --dia-note-edge: #b0a336;
  --dia-note-ink: #2d2a12;
  --dia-ghost: #9aa7b1;         /* the wireframe on the empty sheet */

  /* Golden-ratio steps. Surface tokens below refer to this shared number scale. */
  --phi-3: 3px;
  --phi-4: 4px;
  --phi-5: 5px;
  --phi-6: 6px;
  --phi-8: 8px;
  --phi-10: 10px;
  --phi-13: 13px;
  --phi-17: 17px;
  --phi-21: 21px;
  --phi-27: 27px;
  --phi-34: 34px;
  --phi-43: 43px;
  --phi-55: 55px;
  --phi-70: 70px;
  --phi-89: 89px;
  --phi-113: 113px;
  --phi-144: 144px;
  --phi-183: 183px;
  --phi-233: 233px;
  --phi-296: 296px;
  --phi-377: 377px;
  --phi-479: 479px;
  --phi-610: 610px;

  --radius: var(--phi-5);
  --radius-sm: var(--phi-5);
  --radius-xs: var(--phi-3);
  --text-lg: var(--phi-17);
  --text-base: var(--phi-13);
  --text-num: var(--phi-13);
  --text-code: var(--phi-13);
  --text-sm: var(--phi-13);
  --text-xs: var(--phi-10);
  --text-mono: var(--phi-10);
  --space-1: var(--phi-3);
  --space-2: var(--phi-5);
  --space-3: var(--phi-8);
  --space-4: var(--phi-13);
  --space-5: var(--phi-21);
  --space-6: var(--phi-21);
  --strip-top: var(--phi-43);
  --strip-bottom: var(--phi-43);
  --pane: var(--phi-610);
  --row: var(--phi-43);
  --btn-h: var(--phi-34);
  --target-min: var(--phi-43);
  --target-compact: var(--phi-34);
  --icon: var(--phi-17);
  --chip-h: var(--phi-34);
  --mark: var(--phi-21);
  --mark-radius: var(--phi-5);
  --gutter-w: var(--phi-43);
  --line-h: var(--phi-21);
  --splitter-w: var(--phi-17);
  --grip-w: var(--phi-13);
  --grip-h: var(--phi-70);
  --star: var(--phi-27);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #101418; --foreground: #e4e9ed; --card: #171d22; --card-foreground: #e4e9ed;
    --muted: #1f272d; --muted-foreground: #96a2ab; --plate: #080b0d; --border: #2b343b;
    --sheet-edge: #333c43; --rule: #e4e9ed; --gutter-ink: #7a8892; --code-ink: #e4e9ed;
    --primary: #35b8d6; --primary-foreground: #052028; --primary-hover: #6ad0e6;
    --attention: #f2897a; --attention-soft: #2b1a17;
    --handle-bg: #e4e9ed; --handle-ink: #101418;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .6); --shadow: 0 10px 24px -12px rgb(0 0 0 / .8);
  }
}
/* @pair --foreground on --background */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --muted-foreground on --muted */
/* @pair --gutter-ink on --card */
/* @pair --primary-foreground on --primary */
/* @pair --attention on --attention-soft */
/* @pair --handle-ink on --handle-bg */
/* @pair --dia-actor-ink on --dia-actor */
/* @pair --dia-note-ink on --dia-note */

/* One frame at a time (owner rule 10.09): every focusable control draws its ring ON the border,
   never outside it; nothing falls back to the browser ring. Product rules may override. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}

:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}