/* PTA Study Lab — design tokens (OWNER: design lead).
 * Every surface, section renderer, custom element and inline SVG styles against these names.
 * Light is the default; dark applies via prefers-color-scheme (when data-theme is unset/"system")
 * or explicitly via <html data-theme="dark">. Text size: <html data-text-size="s|m|l|xl">.
 * Reduced motion: <html class="reduce-motion"> (also honours prefers-reduced-motion).
 *
 * Palette idea: warm paper + deep "scrubs" teal ink + a coral highlight used sparingly for the
 * thing she must look at (the target structure, the active step, the safety line).
 */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
/* Digits come from Public Sans: Atkinson's slashed zero reads like "Ø" (charting shorthand for "none"),
   which is a real risk in a clinical app ("128/80" must never look like "128/8Ø"). Same descriptors as the
   face above so the browser composites them; declared AFTER it so it wins for U+0030–0039. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../assets/fonts/PublicSans-Variable.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2') format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('../assets/fonts/AtkinsonHyperlegibleMono-Variable.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --text-scale: 1;

  /* ── Color (light) ─────────────────────────────────────────── */
  --bg:               #f5f2ec;   /* warm paper */
  --surface:          #ffffff;
  --surface-2:        #ece7df;   /* insets, wells, chips */
  --surface-3:        #e2dbd0;   /* (extra) pressed / track */
  --text:             #18232a;   /* ink */
  --text-muted:       #55636a;   /* 6.0:1 on --bg */
  --border:           #dcd4c8;
  --border-strong:    #b9afa1;   /* (extra) inputs, dividers that must be seen */
  --primary:          #0b6b63;   /* deep teal — 6.2:1 with white */
  --primary-strong:   #08534d;   /* (extra) hover/pressed */
  --primary-soft:     #d9ece8;   /* (extra) tinted backgrounds */
  --primary-contrast: #ffffff;
  --accent:           #d9542b;   /* coral — highlights, the active target */
  --accent-soft:      #fbe3d8;   /* (extra) */
  --accent-contrast:  #ffffff;   /* (extra) */
  --success:          #22774a;
  --success-soft:     #dcefe3;
  --warning:          #9a5b00;   /* AA as text on light surfaces */
  --warning-soft:     #fbecd0;
  --danger:           #b8302a;
  --danger-soft:      #f9dedb;
  --info:             #2a62a8;
  --info-soft:        #dde8f6;
  --focus:            #1d6fe0;
  --accent-text:      #a83f1c;   /* (extra) coral as SMALL text: 5.5:1 on --bg, 5.0:1 on --accent-soft (design QA) */
  --ui-line:          #8a8378;   /* (extra) idle progress segments / non-text UI that must reach 3:1 */
  --on-highlight:     #18232a;   /* (extra) text/number on --ill-highlight (5.6:1; white was 2.86:1) */
  --warning-text:     #8a5100;   /* (extra) warning as small text on tinted panels (5.25:1 on --primary-soft) */

  /* ── Shape & depth ─────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;          /* (extra) */
  --shadow:    0 1px 2px rgba(24, 35, 42, .06), 0 2px 8px rgba(24, 35, 42, .06);
  --shadow-lg: 0 2px 6px rgba(24, 35, 42, .08), 0 18px 40px -12px rgba(24, 35, 42, .22);

  /* ── Space (4-pt rhythm) ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Type ──────────────────────────────────────────────────── */
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Fluid scale (≈1.2 on phones → ≈1.25 on desktop). All in rem, so the text-size setting scales everything. */
  --step--1: clamp(0.84rem, 0.82rem + 0.08vw, 0.89rem);   /* (extra) small print */
  --step-0:  clamp(1.02rem, 0.99rem + 0.14vw, 1.10rem);   /* body */
  --step-1:  clamp(1.18rem, 1.12rem + 0.28vw, 1.36rem);
  --step-2:  clamp(1.38rem, 1.28rem + 0.48vw, 1.70rem);
  --step-3:  clamp(1.62rem, 1.45rem + 0.80vw, 2.15rem);
  --step-4:  clamp(1.95rem, 1.68rem + 1.30vw, 2.75rem);
  --step-5:  clamp(2.30rem, 1.90rem + 2.00vw, 3.50rem);
  --leading: 1.55;               /* (extra) */
  --measure: 66ch;               /* (extra) comfortable line length */

  /* ── Motion ────────────────────────────────────────────────── */
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* (extra) */
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  520ms;

  /* ── Layout (extra) ────────────────────────────────────────── */
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --sidebar-w: 300px;
  --content-max: 1080px;
  --tap: 44px;                   /* minimum tap target */

  /* ── Illustration palette (SVG fills/strokes) ──────────────── */
  --ill-skin:          #ecc6a8;  /* patient / model skin */
  --ill-skin-shade:    #d49e7d;
  --ill-bone:          #f4ecdd;
  --ill-bone-shade:    #d6c6a8;
  --ill-muscle:        #d0675b;
  --ill-muscle-shade:  #a8473f;
  --ill-tendon:        #ece2cc;
  --ill-artery:        #cf3434;
  --ill-vein:          #3b6cb4;
  --ill-nerve:         #e3b52c;
  --ill-hand:          #9b6a4e;  /* examiner's hands — deliberately a different tone from the patient */
  --ill-hand-shade:    #7c513a;  /* (extra) */
  --ill-equipment:     #4f6670;  /* cuffs, goniometers, devices */
  --ill-equipment-2:   #8fa4ad;  /* (extra) secondary equipment tone */
  --ill-highlight:     #ff6a2b;  /* THE target: pulses, arrows, "press here" */
  --ill-stroke:        #26333a;  /* outlines */
  --ill-label:         #18232a;  /* (extra) label text + leader lines */
  --ill-bg:            #fbf8f3;  /* (extra) visual stage background */
  --ill-grid:          #e7e0d5;  /* (extra) faint guides, floor lines */
  /* (extra) figure-library people & equipment (js/components/figure-lib.js) */
  --ill-scrubs:        #2f7f86;  /* clinician's scrubs (never the patient) */
  --ill-shirt:         #7f9cc4;  /* patient's clothing */
  --ill-cuff:          #3d5f8c;  /* BP cuff fabric */
  --ill-tubing:        #39444a;  /* stethoscope / cuff tubing */
  --ill-wood:          #c7a173;  /* canes, plinth legs */
  --ill-belt:          #b7a27c;  /* gait belt */
}

/* ── Dark ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1518; --surface: #172025; --surface-2: #1f2a30; --surface-3: #283640;
    --text: #e9eeec; --text-muted: #a3b0b3; --border: #2c3a41; --border-strong: #46565e;
    --primary: #4cc3b3; --primary-strong: #74d6c8; --primary-soft: #143a37; --primary-contrast: #06201d;
    --accent: #ff8a5c; --accent-soft: #3d2219; --accent-contrast: #2a1006;
    --success: #5ccf8e; --success-soft: #133325; --warning: #f0b347; --warning-soft: #3a2b10;
    --danger: #ff7b72; --danger-soft: #3d1a19; --info: #79adf2; --info-soft: #172c47; --focus: #7cb4ff;
    --accent-text: #ff9a70; --ui-line: #5f6f77; --on-highlight: #18232a; --warning-text: #f0b347;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -12px rgba(0,0,0,.6);
    --ill-skin: #d9b192; --ill-skin-shade: #b98768; --ill-bone: #e6dccb; --ill-bone-shade: #bfae90;
    --ill-muscle: #c45d52; --ill-muscle-shade: #94403a; --ill-tendon: #d8ccb4;
    --ill-artery: #e04848; --ill-vein: #5b8ad0; --ill-nerve: #e8bf42;
    --ill-hand: #8e624a; --ill-hand-shade: #6c4835; --ill-equipment: #7d97a2; --ill-equipment-2: #5a707a;
    --ill-highlight: #ff7a3d; --ill-stroke: #6b7a80; --ill-label: #e9eeec; --ill-bg: #131b1f; --ill-grid: #24313a;
    --ill-scrubs: #2b7a80; --ill-shirt: #6d89b0; --ill-cuff: #4d6f9e; --ill-tubing: #6f7d84; --ill-wood: #a9865b; --ill-belt: #9d8a66;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1518; --surface: #172025; --surface-2: #1f2a30; --surface-3: #283640;
  --text: #e9eeec; --text-muted: #a3b0b3; --border: #2c3a41; --border-strong: #46565e;
  --primary: #4cc3b3; --primary-strong: #74d6c8; --primary-soft: #143a37; --primary-contrast: #06201d;
  --accent: #ff8a5c; --accent-soft: #3d2219; --accent-contrast: #2a1006;
  --success: #5ccf8e; --success-soft: #133325; --warning: #f0b347; --warning-soft: #3a2b10;
  --danger: #ff7b72; --danger-soft: #3d1a19; --info: #79adf2; --info-soft: #172c47; --focus: #7cb4ff;
  --accent-text: #ff9a70; --ui-line: #5f6f77; --on-highlight: #18232a; --warning-text: #f0b347;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -12px rgba(0,0,0,.6);
  --ill-skin: #d9b192; --ill-skin-shade: #b98768; --ill-bone: #e6dccb; --ill-bone-shade: #bfae90;
  --ill-muscle: #c45d52; --ill-muscle-shade: #94403a; --ill-tendon: #d8ccb4;
  --ill-artery: #e04848; --ill-vein: #5b8ad0; --ill-nerve: #e8bf42;
  --ill-hand: #8e624a; --ill-hand-shade: #6c4835; --ill-equipment: #7d97a2; --ill-equipment-2: #5a707a;
  --ill-highlight: #ff7a3d; --ill-stroke: #6b7a80; --ill-label: #e9eeec; --ill-bg: #131b1f; --ill-grid: #24313a;
  --ill-scrubs: #2b7a80; --ill-shirt: #6d89b0; --ill-cuff: #4d6f9e; --ill-tubing: #6f7d84; --ill-wood: #a9865b; --ill-belt: #9d8a66;
}

/* ── Text size setting (scales every rem) ─────────────────────── */
:root[data-text-size="s"]  { --text-scale: .92; }
:root[data-text-size="m"]  { --text-scale: 1; }
:root[data-text-size="l"]  { --text-scale: 1.12; }
:root[data-text-size="xl"] { --text-scale: 1.26; }

/* ── Reduced motion (setting or OS) ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}
:root.reduce-motion { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }