/* Soft Acro Aaron 2.0 design tokens (Aaron approved 13-14 Oct; decisions d01-d16, project doc
   "claude/MFS design review + Soft Acro Aaron 2.0 proposal (Fable, 12 Oct)", specimens https://claude.ai/artifact/WBdX2JK1RGfoEikoTsR1W2).
   d03: ONE palette for every page - PVA grounds, blue and ink + the 1.0 orange roles + the 1.0 danger red.
   EVERY colour, font, radius and shadow on this site is read from here: builder.css, page.css, privacy, confirmed and demo contain no hex values.
   d06: text on --signal is --on-signal (ink), never white. Orange TEXT under 24px uses --signal-ink; --signal-bold only for 24px+ display.
   Dark theme: only pages that opt in with <html data-scheme="auto"> (the program page) follow the phone's dark mode.
   Fonts are self-hosted in /assets/fonts/ (SIL OFL, licence files next to them). Nothing is loaded from Google or any CDN. */

/* Jost (headings), Figtree (text), Caveat + Caveat Brush (handwritten notes): woff2, Latin. font-display: swap = text shows at once in the fallback font. */
@font-face { font-family: "Jost"; src: url("fonts/Jost-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/Caveat-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url("fonts/CaveatBrush-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* grounds + lines */
  --bg: #EDFAFF;            /* page ground */
  --surface: #FFFFFF;       /* cards, sheets, inputs */
  --soft: #DAF0FE;          /* info callout, segmented track, quiet fills */
  --line: #AAD2E6;          /* decorative dividers only (1.6:1) */
  --line-strong: #5E86AA;   /* d16: control borders, 3.7:1 on white */
  /* text */
  --ink: #10324A;
  --muted: #4D6B80;
  /* blue = action, links, focus */
  --blue: #03659D;
  --blue-strong: #024A74;
  --on-blue: #FFFFFF;
  /* orange roles (d03 / d06) */
  --signal: #EB6D38;        /* fill - with an ink label (4.7:1) */
  --signal-bold: #DA5B26;   /* display 24px+ and the hand-drawn pen stroke */
  --signal-ink: #B04418;    /* orange text under 24px (5.3:1 on bg) */
  --on-signal: #0F2A43;      /* deep ink: 4.7:1 on #EB6D38 (#10324A is only 4.3:1) */
  --peach: #FFE6DC;         /* warm callout, chips, conditioning tint */
  /* status - always with a word or a mark (DS 1.0 rule) */
  --danger: #B42318;
  --danger-soft: #FCEBEA;
  --success: #1D7555;
  --success-soft: #E2F3E8;
  --amber: #9A6200;
  --amber-soft: #FBF0D9;
  --yellow: #F2B400;
  --scrim: rgba(6, 16, 26, .78);
  --video: #06101A; --on-video: #FFFFFF; --video-line: rgba(255, 255, 255, .25);   /* video frames, same in both themes */
  /* poster hotspots: hover = blue wash, picked = orange wash */
  --hotspot-hover: rgba(3, 101, 157, .10);
  --hotspot-on: rgba(235, 109, 56, .18);

  --font-display: Jost, "Futura PT", Futura, "Century Gothic", "Avenir Next", sans-serif;
  --font-text: Figtree, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat Brush", Caveat, "Marker Felt", "Bradley Hand", cursive;

  /* d08: body 17px on phones, 18px from 720px; notes 15px; nothing under 14px */
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-tiny: 14px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px;

  /* radii: controls 8, callouts + inputs 12, cards + sheets 18 */
  --r-sm: 8px; --r-md: 12px; --r-co: 16px; --r-lg: 18px; --r-full: 999px;

  --shadow-card: 0 1px 2px rgba(16, 50, 74, .06), 0 8px 24px rgba(16, 50, 74, .08);
  --shadow-float: 0 2px 6px rgba(16, 50, 74, .08), 0 24px 48px -18px rgba(16, 50, 74, .25);
  --shadow-bar: 0 -1px 2px rgba(16, 50, 74, .06), 0 -8px 24px rgba(16, 50, 74, .08);
  --shadow-press: 0 1px 3px rgba(16, 50, 74, .15);
  --stroke-control: 2px;
  --ease: cubic-bezier(.2, .8, .2, 1);   /* d10: ease, never overshoot */
  color-scheme: light;
}
@media (min-width: 720px) { :root { --fs-body: 18px; } }

/* Dark set (program page only: <html data-scheme="auto">, or data-theme="dark" to force it) */
@media (prefers-color-scheme: dark) {
  :root[data-scheme="auto"]:not([data-theme="light"]) {
    --bg: #0C1A24; --surface: #132634; --soft: #18344A; --line: #2B4A60; --line-strong: #6A90AE;
    --ink: #E4F0F7; --muted: #9DB5C6; --blue: #7CC3EE; --blue-strong: #A9D8F5; --on-blue: #0C1A24;
    --signal: #F08050; --signal-bold: #F59568; --signal-ink: #F7A47C; --on-signal: #0F2A43; --peach: #3A2219;
    --danger: #FF8A7A; --danger-soft: #3A1A18; --success: #6FD1A8; --success-soft: #15301F;
    --amber: #E2B04A; --amber-soft: #33280F; --yellow: #F5C542; --scrim: rgba(0, 0, 0, .78);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-bar: 0 -1px 2px rgba(0, 0, 0, .3), 0 -8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1A24; --surface: #132634; --soft: #18344A; --line: #2B4A60; --line-strong: #6A90AE;
  --ink: #E4F0F7; --muted: #9DB5C6; --blue: #7CC3EE; --blue-strong: #A9D8F5; --on-blue: #0C1A24;
  --signal: #F08050; --signal-bold: #F59568; --signal-ink: #F7A47C; --on-signal: #0F2A43; --peach: #3A2219;
  --danger: #FF8A7A; --danger-soft: #3A1A18; --success: #6FD1A8; --success-soft: #15301F;
  --amber: #E2B04A; --amber-soft: #33280F; --yellow: #F5C542; --scrim: rgba(0, 0, 0, .78);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-bar: 0 -1px 2px rgba(0, 0, 0, .3), 0 -8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- shared 2.0 components (d01, d05, d09, d13, d15, d16) - every page may use them ---------- */
/* d13 focus: 3px blue ring with a 3px gap, keyboard only */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
/* d09 buttons: primary = orange fill + ink label + soft shadow + 1px press; secondary = white + 2px line-strong ring; quiet = underlined blue */
.btn-pri { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-full);
  background: var(--signal); color: var(--on-signal); font: 700 17px/1.2 var(--font-display); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-card);
  transition: transform .15s ease, background .15s ease; }
.btn-pri:active { transform: translateY(1px); }
/* disabled primary: soft blue fill + muted label (4.8:1), never a fade; a hint line underneath says what to do */
.btn-pri:disabled, .btn-pri[aria-disabled="true"] { background: var(--soft); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-full);
  background: var(--surface); color: var(--blue); font: 700 16px/1.2 var(--font-display); text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-quiet { border: 0; background: none; padding: 0; min-height: 44px; color: var(--blue); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .btn-pri:hover { background: var(--signal-bold); } .btn-sec:hover { box-shadow: inset 0 0 0 2px var(--blue); } }
/* d05 callouts: one shape, three tones, no borders */
.callout { margin: 12px 0 0; border: 0; border-radius: var(--r-co); padding: 12px 14px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.callout.info { background: var(--soft); } .callout.info strong { color: var(--blue); }
.callout.warm { background: var(--peach); } .callout.warm strong { color: var(--signal-ink); }
.callout.danger { background: var(--danger-soft); } .callout.danger strong { color: var(--danger); }
/* d15 close disc: 44px, soft fill, SVG cross */
.close-disc { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.close-disc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }