/*
 * tokens.css — THE canonical design tokens for Augmented Anatomy.
 *
 * ⚠ THIS FILE IS THE SOURCE OF TRUTH. Edit colours and scales HERE, never in a
 *   component. `npm run sync-starter` never overwrites this file.
 *
 * Direction A, "Atlas" (picked 2026-10-04, see DECISIONS.md): a light paper inspector beside a
 * dark specimen stage. The ink is the one interactive accent; colour appears only where it means
 * an anatomical layer.
 *
 * TWO LAYERS:
 *   Layer 1 — ours.     --brand-*, --anatomy-* and the scales. This is what changes.
 *   Layer 2 — shadcn's. The semantic tokens shadcn/ui components consume, mapped ONTO layer 1.
 *
 * Used by: the inspector (ui/src/index.css imports this file), the stage overlays in
 * web/anatomy.html (through the inspector's stylesheet), and the front door (site/tokens.css).
 */

:root {
  /* ══ LAYER 1 — OURS ════════════════════════════════════════════════════════ */

  /* — Palette (by role) — */
  --brand-ground:   #f7f6f3;   /* paper: the inspector, overlay cards, the front door */
  --brand-surface:  #ffffff;   /* raised controls on paper: selects, keys, menus */
  --brand-sunken:   #ebe9e4;   /* tab and segment tracks */
  --brand-hover:    #efeee9;   /* row hover on paper */
  --brand-ink:      #2f3437;   /* primary text — and the one accent */
  --brand-muted:    #787774;   /* secondary text */
  --brand-dim:      #a19f99;   /* captions, placeholders */
  --brand-hair:     #e3e1dc;   /* hairlines, dividers */
  --brand-hair-strong: #d6d4cd;/* control borders and switch tracks: hairline is too faint for a control */
  --brand-accent:   #2f3437;   /* Atlas has no colour accent: interactive = ink */
  --brand-accent-hot: #454b4e; /* accent hover / active */
  --brand-on-accent: #f7f6f3;  /* text on the accent */
  --brand-danger:   #9f2f2d;   --brand-danger-bg:  #fdebec;
  --brand-warning:  #956400;   --brand-warning-bg: #fbf3db;
  --brand-success:  #346538;   --brand-success-bg: #edf3ec;

  /* — The stage: the camera view and the cards that float over it — */
  --brand-stage:    #1c1c1a;                    /* ground behind the camera image */
  --brand-hud:      rgba(247, 246, 243, 0.95);  /* paper cards over the stage */
  --brand-hud-line: rgba(0, 0, 0, 0.06);

  /* — Anatomy: the colour each layer is drawn in on the stage, for swatches and legends.
       These mirror the 3D materials (web/js/anatomy/*.js); change both together. — */
  --anatomy-skin:   #e2cbbd;
  --anatomy-bone:   #d8ccb4;
  --anatomy-muscle: #c0574f;
  --anatomy-muscle-ink: #9f2f2d;   /* muscle colour dark enough for text on paper */
  --anatomy-tendon: #cfd8e1;
  --anatomy-artery: #b8231b;
  --anatomy-vein:   #2f6fd8;       /* blue by convention; blood in veins is dark red */
  --anatomy-flow:   #e48a72;
  --anatomy-neutral: #b4b2ab;      /* annotations: labels, joints, axes */

  /* — Radius — one knob for every rectangle, plus pill for round things. — */
  --radius: 8px;
  --radius-pill: 999px;

  /* — Spacing scale (base-4) — */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;  --space-12: 48px;
  --space-label: 8px;
  --space-field: 24px;
  --space-section: 48px;

  /* — Controls — inputs and buttons share one height scale. — */
  --control-h-sm: 28px;   /* the inspector is a dense desktop tool */
  --control-h: 32px;
  --control-h-lg: 44px;
  --control-px: 12px;
  --btn-px: 16px;
  --touch-target: 44px;   /* ⚠ minimum tap target on any touch surface */

  /* — Typefaces (bundled with the app from Fontsource; no font CDN) — */
  --font-display: "Newsreader Variable", Georgia, serif;           /* section titles, card titles */
  --font-body: "Geist Variable", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, Menlo, monospace;  /* keys, numbers, telemetry */

  /* — Type scale — the inspector runs small: it is a desktop instrument panel. — */
  --text-display-xl: 36px;
  --text-display-lg: 28px;
  --text-title: 21px;
  --text-heading: 17px;
  --text-body: 14px;
  --text-ui: 13px;
  --text-caption: 11.5px;
  --leading-tight: 1.15;
  --leading-body: 1.5;

  /* — Elevation — Atlas is flat; shadows only lift a card off the stage. — */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.18);

  /* — Motion — quiet: nothing moves unless you touch it. — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ══ LAYER 2 — shadcn/ui semantic tokens, mapped onto layer 1 ══════════════ */

  --background: var(--brand-ground);
  --foreground: var(--brand-ink);
  --card: var(--brand-surface);
  --card-foreground: var(--brand-ink);
  --popover: var(--brand-surface);
  --popover-foreground: var(--brand-ink);
  --primary: var(--brand-accent);
  --primary-foreground: var(--brand-on-accent);
  --secondary: var(--brand-sunken);
  --secondary-foreground: var(--brand-ink);
  --muted: var(--brand-sunken);
  --muted-foreground: var(--brand-muted);
  --accent: var(--brand-hover);
  --accent-foreground: var(--brand-ink);
  --destructive: var(--brand-danger);
  --destructive-foreground: var(--brand-on-accent);
  --border: var(--brand-hair);
  --input: var(--brand-hair-strong);
  --ring: var(--brand-accent);
}

/* No dark theme: the stage is already the dark half of the view (DECISIONS.md, 2026-10-04). */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}