/* Follow Me Therapy design tokens. GENERATED from design/tokens.json by
   tools/build_tokens.py. Don't edit; change the tokens and rebuild. */
:root {
  --purple: #502eed;
  --purple-dark: #482ccc;
  --purple-ink: #4832c2;
  --purple-tint: #efe9ff;
  --purple-line: #d9cffc;
  --teal: #00626e;
  --teal-ink: #005965;
  --teal-tint: #e3f4f5;
  --teal-line: #a9d9de;
  --sun: #f2a516;
  --sun-deep: #9c6100;
  --sun-ink: #744600;
  --sun-tint: #fff0cc;
  --sun-line: #f3d38a;
  --butter: #fff4dc;
  --pink: #cb225d;
  --pink-tint: #ffe6ef;
  --pink-line: #f6b6cb;
  --ink: #2b2540;
  --ink-soft: #504b5e;
  --deep: #2e2363;
  --paper: #ffffff;
  --live: #2fbf71;
  --live-ink: #0b5c3e;
  --brand-ink: var(--ink);
  --focus: var(--ink);
  --trail: var(--purple-light);
  --rule: #857aa8;
  --teal-bright: #008c9e;
  --teal-deep: #015964;
  --teal-deeper: #035560;
  --mint: #c9f0ec;
  --sun-soft: #fde3a7;
  --butter-deep: #ffe8ba;
  --lilac: #e7d7f8;
  --lilac-bright: #d9b5ff;
  --purple-mist: #ece8fb;
  --purple-fog: #e6e0fb;
  --purple-pale: #e2dbff;
  --purple-light: #c7bbff;
  --pink-deep: #912049;
  --pink-pale: #fde7ef;
  --coral: #ff6f61;
  --green: #19b37a;
  --green-teal: #1f9e89;
  --font-display: "Fredoka", "Fredoka Fallback", "Quicksand", "QS Fallback", system-ui, sans-serif;
  --font-body: "Quicksand", "QS Fallback", system-ui, sans-serif;
  --weight-brand: 400;
  --text-xs: 14px;
  --text-sm: 15px;
  --text-base: clamp(16.5px, 16.1667px + 0.0926vw, 17.5px);
  --text-md: clamp(17px, 16.5px + 0.1389vw, 18.5px);
  --text-lg: clamp(18.5px, 17.6667px + 0.2315vw, 21px);
  --text-xl: clamp(21px, 19.6667px + 0.3704vw, 25px);
  --text-kid: clamp(20px, 18.6667px + 0.3704vw, 24px);
  --text-2xl: clamp(24px, 22px + 0.5556vw, 30px);
  --text-3xl: clamp(30px, 26.6667px + 0.9259vw, 40px);
  --text-4xl: clamp(32px, 26px + 1.6667vw, 50px);
  --text-display: clamp(38px, 26.6667px + 3.1481vw, 72px);
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;
  --space-hair: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --gutter: clamp(16px, 10.6667px + 1.4815vw, 32px);
  --section-space: clamp(72px, 58.6667px + 3.7037vw, 112px);
  --section-top: clamp(48px, 40px + 2.2222vw, 72px);
  --stack: clamp(28px, 24px + 1.1111vw, 40px);
  --group-gap: clamp(10px, 8.6667px + 0.3704vw, 14px);
  --card-pad: clamp(20px, 18.6667px + 0.3704vw, 24px);
  --grid-gap: clamp(20px, 17.3333px + 0.7407vw, 28px);
  --content: 760px;
  --measure: 680px;
  --wave: 40px;
  --nav-offset: 12px;
  --rail: 132px;
  --rail-gap: 16px;
  --size-target: 44px;
  --size-nav-item: 32px;
  --size-icon-sm: 20px;
  --size-icon: 24px;
  --size-icon-lg: 34px;
  --size-icon-xl: 44px;
  --size-tile-sm: 30px;
  --size-tile: 44px;
  --size-tile-md: 60px;
  --size-tile-lg: 76px;
  --size-step: 56px;
  --size-fab: 60px;
  --size-button: 52px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-tile: var(--radius-md);
  --radius-note: 22px;
  --radius-card: 24px;
  --radius-frame: 28px;
  --radius-pill: 999px;
  --border-outline: 2px;
  --border-focus: 3px;
  --shadow-rest: 0 4px 12px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-soft: 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-raised: 0 16px 32px color-mix(in srgb, var(--ink) 12%, transparent);
  --shadow-panel: 0 16px 40px color-mix(in srgb, var(--purple-ink) 12%, transparent);
  --shadow-overlay: 0 20px 50px color-mix(in srgb, var(--ink) 25%, transparent);
  --shadow-glow-purple: 0 8px 18px color-mix(in srgb, var(--purple) 30%, transparent);
  --shadow-glow-teal: 0 8px 18px color-mix(in srgb, var(--teal) 30%, transparent);
  --shadow-glow-sun: 0 8px 18px color-mix(in srgb, var(--sun) 35%, transparent);
  --shadow-glow-pink: 0 8px 18px color-mix(in srgb, var(--pink) 30%, transparent);
  --shadow-glow: var(--shadow-glow-purple);
  --shadow-button: var(--shadow-glow);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;
  --dur-entrance: 900ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.3, 1.5, 0.5, 1);
  --z-base: 1;
  --z-raised: 2;
  --z-sticky: 50;
  --z-nav: 900;
  --z-fab: 950;
  --z-modal: 1000;
  --z-skip: 1100;
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-short: 820px;
  --bp-shorter: 700px;
  --page-a4: 210mm 297mm;
  --page-a5: 148mm 210mm;
  --bleed: 3mm;
  --safe-margin: 10mm;
  --safe-margin-book: 12mm;
  --gutter-book: 15mm;
  --rule-write: 10mm;
  --rule-kid: 16mm;

  /* Tones: the role each colour plays (design/tokens.json › tone). */
  --tone-purple-tint: var(--purple-tint);
  --tone-purple-ink: var(--purple-ink);
  --tone-purple-line: var(--purple-line);
  --tone-purple-solid: var(--purple);
  --tone-purple-strong: var(--purple);
  --tone-purple-strong-hover: var(--purple-dark);
  --tone-purple-ground: var(--purple-tint);
  --tone-purple-icon: var(--purple);
  --tone-purple-on-solid: var(--paper);
  --tone-teal-tint: var(--teal-tint);
  --tone-teal-ink: var(--teal-ink);
  --tone-teal-line: var(--teal-line);
  --tone-teal-solid: var(--teal);
  --tone-teal-strong: var(--teal-ink);
  --tone-teal-strong-hover: var(--teal-deeper);
  --tone-teal-ground: var(--teal-tint);
  --tone-teal-icon: var(--teal);
  --tone-teal-on-solid: var(--paper);
  --tone-sun-tint: var(--sun-tint);
  --tone-sun-ink: var(--sun-ink);
  --tone-sun-line: var(--sun-line);
  --tone-sun-solid: var(--sun);
  --tone-sun-strong: var(--sun-deep);
  --tone-sun-strong-hover: var(--sun-deep);
  --tone-sun-ground: var(--butter);
  --tone-sun-icon: var(--sun-deep);
  --tone-sun-on-solid: var(--ink);
  --tone-pink-tint: var(--pink-tint);
  --tone-pink-ink: var(--pink-deep);
  --tone-pink-line: var(--pink-line);
  --tone-pink-solid: var(--pink-deep);
  --tone-pink-strong: var(--pink-deep);
  --tone-pink-strong-hover: var(--pink-deep);
  --tone-pink-ground: var(--pink-tint);
  --tone-pink-icon: var(--pink);
  --tone-pink-on-solid: var(--paper);

  /* Components: which role or value each part takes (tokens.json › component, design/components.json). */
  --chip-purple-fill: var(--tone-purple-tint);
  --chip-teal-fill: var(--tone-teal-tint);
  --chip-sun-fill: var(--tone-sun-tint);
  --chip-pink-fill: var(--tone-pink-tint);
  --chip-purple-ink: var(--tone-purple-ink);
  --chip-teal-ink: var(--tone-teal-ink);
  --chip-sun-ink: var(--tone-sun-ink);
  --chip-pink-ink: var(--tone-pink-ink);
  --chip-purple-line: var(--tone-purple-line);
  --chip-teal-line: var(--tone-teal-line);
  --chip-sun-line: var(--tone-sun-line);
  --chip-pink-line: var(--tone-pink-line);
  --chip-purple-line-hover: var(--tone-purple-solid);
  --chip-teal-line-hover: var(--tone-teal-solid);
  --chip-sun-line-hover: var(--tone-sun-solid);
  --chip-pink-line-hover: var(--tone-pink-solid);
  --chip-fill-on-ground: var(--paper);
  --chip-outline-fill: var(--paper);
  --chip-live: var(--live);
  --chip-live-ink: var(--live-ink);
  --chip-purple-fill-selected: var(--tone-purple-ink);
  --chip-teal-fill-selected: var(--tone-teal-ink);
  --chip-sun-fill-selected: var(--tone-sun-ink);
  --chip-pink-fill-selected: var(--tone-pink-ink);
  --chip-ink-selected: var(--paper);
  --tag-purple-fill: var(--tone-purple-solid);
  --tag-teal-fill: var(--tone-teal-solid);
  --tag-sun-fill: var(--tone-sun-solid);
  --tag-pink-fill: var(--tone-pink-solid);
  --tag-purple-ink: var(--tone-purple-on-solid);
  --tag-teal-ink: var(--tone-teal-on-solid);
  --tag-sun-ink: var(--tone-sun-on-solid);
  --tag-pink-ink: var(--tone-pink-on-solid);
  --tile-purple-fill: var(--tone-purple-tint);
  --tile-teal-fill: var(--tone-teal-tint);
  --tile-sun-fill: var(--tone-sun-tint);
  --tile-pink-fill: var(--tone-pink-tint);
  --tile-purple-icon: var(--tone-purple-icon);
  --tile-teal-icon: var(--tone-teal-icon);
  --tile-sun-icon: var(--tone-sun-icon);
  --tile-pink-icon: var(--tone-pink-icon);
  --tile-purple-line: var(--tone-purple-line);
  --tile-teal-line: var(--tone-teal-line);
  --tile-sun-line: var(--tone-sun-line);
  --tile-pink-line: var(--tone-pink-line);
  --tile-fill-on-ground: var(--paper);
  --note-purple-fill: var(--tone-purple-ground);
  --note-teal-fill: var(--tone-teal-ground);
  --note-sun-fill: var(--tone-sun-ground);
  --note-pink-fill: var(--tone-pink-ground);
  --note-purple-line: var(--tone-purple-line);
  --note-teal-line: var(--tone-teal-line);
  --note-sun-line: var(--tone-sun-line);
  --note-pink-line: var(--tone-pink-line);
  --note-purple-icon: var(--tone-purple-icon);
  --note-teal-icon: var(--tone-teal-icon);
  --note-sun-icon: var(--tone-sun-icon);
  --note-pink-icon: var(--tone-pink-icon);
  --note-lead-in: var(--ink);
  --note-purple-line-hover: var(--tone-purple-solid);
  --note-teal-line-hover: var(--tone-teal-solid);
  --note-sun-line-hover: var(--tone-sun-solid);
  --note-pink-line-hover: var(--tone-pink-solid);
  --note-tile-fill: var(--paper);
  --note-promise-fill: var(--paper);
  --note-purple-promise-tile-fill: var(--tone-purple-tint);
  --note-teal-promise-tile-fill: var(--tone-teal-tint);
  --note-sun-promise-tile-fill: var(--tone-sun-tint);
  --note-pink-promise-tile-fill: var(--tone-pink-tint);
  --note-promise-ink: var(--ink);
  --note-row-fill: var(--paper);
  --note-row-line: var(--deep);
  --note-row-ink: var(--deep);
  --note-row-tile-fill: var(--purple-mist);
  --head-purple-fill: var(--tone-purple-ground);
  --head-teal-fill: var(--tone-teal-ground);
  --head-sun-fill: var(--tone-sun-ground);
  --head-pink-fill: var(--tone-pink-ground);
  --head-purple-line: var(--tone-purple-line);
  --head-teal-line: var(--tone-teal-line);
  --head-sun-line: var(--tone-sun-line);
  --head-pink-line: var(--tone-pink-line);
  --panel-purple-fill: var(--tone-purple-ground);
  --panel-teal-fill: var(--tone-teal-ground);
  --panel-sun-fill: var(--tone-sun-ground);
  --panel-pink-fill: var(--tone-pink-ground);
  --panel-purple-line: var(--tone-purple-line);
  --panel-teal-line: var(--tone-teal-line);
  --panel-sun-line: var(--tone-sun-line);
  --panel-pink-line: var(--tone-pink-line);
  --card-fill: var(--paper);
  --card-purple-line: var(--tone-purple-solid);
  --card-teal-line: var(--tone-teal-solid);
  --card-sun-line: var(--tone-sun-solid);
  --card-pink-line: var(--tone-pink-solid);
  --card-more: var(--purple);
  --card-done-fill: var(--teal);
  --card-done-ink: var(--paper);
  --choice-fill: var(--paper);
  --choice-purple-line: var(--tone-purple-line);
  --choice-teal-line: var(--tone-teal-line);
  --choice-sun-line: var(--tone-sun-line);
  --choice-pink-line: var(--tone-pink-line);
  --choice-purple-fill-selected: var(--tone-purple-tint);
  --choice-teal-fill-selected: var(--tone-teal-tint);
  --choice-sun-fill-selected: var(--tone-sun-tint);
  --choice-pink-fill-selected: var(--tone-pink-tint);
  --choice-purple-line-selected: var(--tone-purple-icon);
  --choice-teal-line-selected: var(--tone-teal-icon);
  --choice-sun-line-selected: var(--tone-sun-icon);
  --choice-pink-line-selected: var(--tone-pink-icon);
  --choice-purple-line-hover: var(--tone-purple-icon);
  --choice-teal-line-hover: var(--tone-teal-icon);
  --choice-sun-line-hover: var(--tone-sun-icon);
  --choice-pink-line-hover: var(--tone-pink-icon);
  --button-purple-fill: var(--tone-purple-strong);
  --button-teal-fill: var(--tone-teal-strong);
  --button-sun-fill: var(--tone-sun-strong);
  --button-pink-fill: var(--tone-pink-strong);
  --button-purple-ink: var(--tone-purple-on-solid);
  --button-teal-ink: var(--tone-teal-on-solid);
  --button-sun-ink: var(--tone-sun-on-solid);
  --button-pink-ink: var(--tone-pink-on-solid);
  --button-purple-line: var(--tone-purple-strong);
  --button-teal-line: var(--tone-teal-strong);
  --button-sun-line: var(--tone-sun-strong);
  --button-pink-line: var(--tone-pink-strong);
  --button-purple-fill-hover: var(--tone-purple-strong-hover);
  --button-teal-fill-hover: var(--tone-teal-strong-hover);
  --button-sun-fill-hover: var(--tone-sun-strong-hover);
  --button-pink-fill-hover: var(--tone-pink-strong-hover);
  --button-outline-fill: var(--paper);
  --button-purple-outline-ink: var(--tone-purple-strong);
  --button-teal-outline-ink: var(--tone-teal-strong);
  --button-sun-outline-ink: var(--tone-sun-strong);
  --button-pink-outline-ink: var(--tone-pink-strong);
  --button-purple-outline-fill-hover: var(--tone-purple-tint);
  --button-teal-outline-fill-hover: var(--tone-teal-tint);
  --button-sun-outline-fill-hover: var(--tone-sun-tint);
  --button-pink-outline-fill-hover: var(--tone-pink-tint);
  --button-purple-outline-ink-hover: var(--tone-purple-strong-hover);
  --button-teal-outline-ink-hover: var(--tone-teal-strong-hover);
  --button-sun-outline-ink-hover: var(--tone-sun-strong-hover);
  --button-pink-outline-ink-hover: var(--tone-pink-strong-hover);
  --button-quiet-fill: var(--sun-tint);
  --button-quiet-ink: var(--ink);
  --button-quiet-line: var(--sun-line);
  --button-disabled-fill: var(--paper);
  --button-disabled-ink: var(--ink-soft);
  --button-disabled-line: var(--purple-line);
  --bar-fill: var(--purple-tint);
  --bar-line: var(--purple-line);
  --bar-ink: var(--ink);
  --bar-brand: var(--brand-ink);
  --bar-tab-ink: var(--ink-soft);
  --bar-tab-ink-selected: var(--purple-ink);
  --bar-tab-icon-selected: var(--purple);
  --bar-wave: var(--space-4);
  --bar-crest: var(--space-5);
  --swash-colour: var(--sun);
  --swash-stroke: 4px;
  --swash-wavelength: var(--space-8);
  --swash-height: var(--space-4);
  --step-fill: var(--purple-tint);
  --step-line: var(--purple-line);
  --step-ink: var(--purple-ink);
  --step-done-fill: var(--teal);
  --step-done-line: var(--teal);
  --step-done-ink: var(--paper);
  --celebrate-fill: var(--sun-tint);
  --celebrate-line: var(--sun-line);
  --celebrate-star: var(--sun);
  --celebrate-star-line: var(--sun-deep);
  --breathe-fill: var(--teal-tint);
  --breathe-line: var(--teal-line);
  --breathe-dot: var(--teal);
  --calendar-none: var(--rule);
  --calendar-planned: var(--purple);
  --calendar-partial: var(--sun-tint);
  --calendar-partial-line: var(--sun-deep);
  --calendar-done-fill: var(--sun);
  --calendar-done-line: var(--sun-deep);
  --calendar-burst-sun: var(--sun);
  --calendar-burst-purple: var(--purple);
  --calendar-burst-teal: var(--teal);
  --calendar-burst-pink: var(--pink);
  --calendar-today: var(--purple-tint);
  --calendar-ink: var(--ink);
  --calendar-day-ink: var(--ink-soft);
  --calendar-rule: var(--rule);
}

/* A4 handouts: semantic tokens in print units. */
.medium-paper, .fmt-sheet {
  --text-xs: 8.5pt;
  --text-sm: 10pt;
  --text-base: 11pt;
  --text-md: 12pt;
  --text-lg: 13pt;
  --text-xl: 16pt;
  --text-kid: 16pt;
  --text-2xl: 18pt;
  --text-3xl: 22pt;
  --text-4xl: 28pt;
  --text-display: 40pt;
  --gutter: 10mm;
  --section-space: 8mm;
  --section-top: 6mm;
  --stack: 7mm;
  --group-gap: 2.5mm;
  --card-pad: 5mm;
  --grid-gap: 4mm;
}

/* A5 staple-book pages: semantic tokens in print units. */
.medium-book, .fmt-page {
  --text-xs: 8.5pt;
  --text-sm: 9.5pt;
  --text-base: 10.5pt;
  --text-md: 11.5pt;
  --text-lg: 12pt;
  --text-xl: 14pt;
  --text-kid: 14pt;
  --text-2xl: 16pt;
  --text-3xl: 19pt;
  --text-4xl: 24pt;
  --text-display: 32pt;
  --gutter: 12mm;
  --section-space: 6mm;
  --section-top: 5mm;
  --stack: 5mm;
  --group-gap: 2mm;
  --card-pad: 4mm;
  --grid-gap: 3mm;
}