/* Durgical design tokens v1 (2026-10-22). The single source for colour, type, space, radius, elevation and motion.
   Spec and usage: docs/design/system.md. Copy this block as-is into engine/page.html and staging/accounts/index.html
   (or link it); never write a raw hex, px font size, radius or shadow in component CSS — use a token.
   Every text/background pair below was checked: body text ≥ 4.5:1, large text and UI edges ≥ 3:1 (system.md §2.3). */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #eef2f2;            /* app canvas behind everything (3D viewport background too) */
  --surface: #ffffff;       /* cards, sheets, panes, list */
  --surface-2: #f5f7f7;     /* inset fills: fields, hover rows, segmented track */
  --surface-3: #e8eded;     /* pressed rows, skeletons */
  --glass: rgba(255, 255, 255, 0.82);   /* floating chrome over the 3D (with --blur) */
  --blur: saturate(1.4) blur(18px);
  --line: #dde4e5;          /* hairlines, card borders */
  --line-strong: #7d8d93;   /* field borders, focusable edges (3:1) */
  --scrim: rgba(12, 22, 26, 0.38);
  /* text */
  --ink: #13232a;           /* titles, body            14.3:1 on --bg */
  --ink-2: #44555c;         /* secondary text           6.9:1 on --bg */
  --ink-3: #5f7076;         /* captions, placeholders   4.6:1 on --bg, 5.2:1 on --surface */
  --ink-inverse: #ffffff;
  /* brand teal */
  --brand: #17807a;         /* the existing brand teal; primary fills, white text 4.8:1 (text on it ≥ 14px bold or 16px) */
  --brand-hover: #13756f;   /* white 5.5:1 */
  --brand-text: #0e6b65;    /* links and teal text on light surfaces 5.6:1 */
  --brand-50: #e3f2f0;      /* selected row / chip fill */
  --brand-100: #c7e5e1;     /* selected border, focus halo */
  --on-brand: #ffffff;
  /* notes amber: ONLY for things that are notes (note pins on the 3D, note count, the «nota» chip) */
  --note: #e8a33d;          /* fill; text on it = --on-note 7.8:1 */
  --on-note: #2a1a00;
  --note-50: #fbf0dc;
  --note-text: #7a4f0c;     /* amber text on --note-50 6.3:1 */
  /* status */
  --danger: #b3361f;        /* text 6.1:1, fill with white 6.1:1 */
  --danger-50: #fbe9e5;
  --success: #1d7a4f;
  --success-50: #e3f3ea;
  --focus: 0 0 0 3px var(--brand-100), 0 0 0 1px var(--brand);
  /* inverse (toasts, tooltips) */
  --inverse: #13232a;
  --on-inverse: #f2f6f6;

  /* type: Bricolage Grotesque for display, Atkinson Hyperlegible for everything else; Plex Mono only for codes */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --t-caption: 12px/16px var(--font-body);      /* meta, timestamps, helper text (weight 400) */
  --t-small: 14px/20px var(--font-body);        /* secondary text, chips, buttons s */
  --t-body: 16px/24px var(--font-body);         /* body, list titles, fields, buttons */
  --t-subhead: 700 18px/24px var(--font-body);  /* card titles, group labels in sheets */
  --t-title: 700 22px/28px var(--font-display); /* sheet/modal titles, header title on phone */
  --t-page: 700 28px/34px var(--font-display);  /* page title on desktop, Inicio greeting */
  --t-hero: 700 40px/44px var(--font-display);  /* marketing / empty-state hero only */

  /* space: 4-pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --gutter: 16px;           /* phone side gutter; 24px ≥ 768, 32px ≥ 1280 */

  /* radius */
  --r-sm: 8px;              /* small controls inside cards (kbd, tags) */
  --r-md: 12px;             /* buttons, fields, list rows, menu */
  --r-lg: 16px;             /* cards, panes, peek */
  --r-xl: 24px;             /* sheets (top corners), modals */
  --r-pill: 999px;          /* chips, segmented, FAB, search */

  /* elevation */
  --e-0: 0 0 0 1px var(--line);
  --e-1: 0 1px 2px rgba(19, 35, 42, 0.06), 0 0 0 1px var(--line);
  --e-2: 0 8px 24px rgba(19, 35, 42, 0.12), 0 0 0 1px rgba(19, 35, 42, 0.04);
  --e-3: 0 24px 64px rgba(19, 35, 42, 0.22), 0 0 0 1px rgba(19, 35, 42, 0.04);

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);      /* enter, move */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);       /* exit */
  --d-fast: 120ms;          /* press, hover, toggles */
  --d-base: 200ms;          /* sheets, popovers, page cross-fade */
  --d-slow: 280ms;          /* big panels, the camera glide UI follows it */

  /* shell geometry (identical in every section; checked by the visual-consistency gate) */
  --rail-w: 72px;           /* desktop ≥ 900 px */
  --header-h: 64px;         /* desktop; 56px on phone */
  --tabbar-h: 64px;         /* phone, + safe-area-inset-bottom */
  --tap: 44px;              /* minimum target */
}
@media (max-width: 899px) { :root { --header-h: 56px; } }
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f171a; --surface: #16232a; --surface-2: #1c2c33; --surface-3: #23353d;
  --glass: rgba(22, 35, 42, 0.8); --line: #26363d; --line-strong: #6c8188; --scrim: rgba(0, 0, 0, 0.55);
  --ink: #e6eef0; --ink-2: #b4c3c8; --ink-3: #8fa1a7; --ink-inverse: #0f171a;
  --brand: #3fbdb3; --brand-hover: #5fd0c6; --brand-text: #5fd0c6; --brand-50: rgba(63, 189, 179, 0.14); --brand-100: rgba(63, 189, 179, 0.32); --on-brand: #062320;
  --note: #f0b75e; --on-note: #2a1a00; --note-50: rgba(240, 183, 94, 0.14); --note-text: #f0b75e;
  --danger: #f08a73; --danger-50: rgba(240, 138, 115, 0.14); --success: #5fcf98; --success-50: rgba(95, 207, 152, 0.14);
  --inverse: #e6eef0; --on-inverse: #0f171a;
  --e-1: 0 0 0 1px var(--line); --e-2: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line); --e-3: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line);
}
@media (prefers-reduced-motion: reduce) { :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; } }

/* Migration aliases: the old variable names in engine/page.html and staging/accounts/index.html keep working while
   components move to the new names. Delete a line once nothing uses its old name. */
:root, :root[data-theme="dark"] {
  --accent: var(--brand); --accent-ink: var(--on-brand); --accent-text: var(--brand-text);
  --muted: var(--ink-3); --solid: var(--surface); --bg-solid: var(--surface); --bg-glow: var(--surface-2);
  --acl: var(--note); --warn: var(--note-text); --tear: var(--danger);
}