/* =====================================================================
 PilatesCRM — Studio CRM for independent reformer / boutique studios
 Design tokens v1.2 · Figtech Design for Rob Hussey · 2026-10-06
 Source of truth: DIRECTION.md. Do not add colours outside this file.
 Craft: house type/motifs/layout language. Palette: NEW cool blue/purple.
 ===================================================================== */

:root {
 /* ---------- Backgrounds & surfaces (light-led) ---------- */
 --c-paper: #F4F6FB; /* default page / app canvas */
 --c-mist: #E8ECF6; /* alternate section band, sidebar wash */
 --c-surface: #FBFCFF; /* cards, inputs, panels */
 --c-surface-raised: #FFFFFF; /* modals, popovers, elevated cards */
 --c-wash-sky: #E4ECFA; /* soft sky wash (hero bloom, selected row) */
 --c-wash-iris: #EEE8F8; /* soft iris wash (quote / feature band) */
 --c-wash-peri: #E8EAF8; /* periwinkle wash (empty states) */

 /* ---------- Ink / text tiers (deep indigo-violet) ---------- */
 --c-ink: #1A1B3A; /* headlines, body. 15.39:1 on paper */
 --c-ink-2: #3A3D5C; /* secondary text, lead. 9.70:1 */
 --c-ink-3: #6B6F8A; /* captions, meta, placeholders. 4.55:1 AA */
 --c-ink-4: #9AA0B8; /* DECORATIVE / disabled only. ~2.7:1 */

 /* ---------- Lines ---------- */
 --c-rule: #D8DEEE; /* hairlines, table rules (decorative) */
 --c-rule-strong: #B8C0D8; /* card hover border, header rule */
 --c-line-input: #7A829E; /* input borders — 3.52:1 on paper (≥3:1) */

 /* ---------- Primary blue family ---------- */
 --c-sky: #8BB8F0; /* soft fill, chart fill, streak light */
 --c-azure: #4A8FE3; /* links, large accent, hover glow */
 --c-cobalt: #2B5FBF; /* PRIMARY CTA fill. 5.56:1 on paper; 5.86:1 under surface text */
 --c-navy: #1E3A7A; /* deep blue text/icon on light. 10.00:1 */

 /* ---------- Secondary purple family ---------- */
 --c-lilac: #C9B8EC; /* soft fill, streak mid, chip wash */
 --c-iris: #8B6FCF; /* secondary accent (not Figtech #7D55C7). 3.68:1 AA-LG */
 --c-violet: #5E4A9E; /* secondary CTA / emphasis text. 6.59:1 */
 --c-indigo: #3D2F6F; /* deepest purple ink/alt. 10.59:1 */

 /* ---------- Focus & semantic states ---------- */
 --c-focus: #2B5FBF; /* focus ring = cobalt */
 --c-error: #B83A4E; /* 5.17:1 on paper */
 --c-error-wash: #F8E6EA;
 --c-success: #247056; /* 5.51:1 on paper */
 --c-success-wash: #E3F2EC;
 --c-warning: #8F6015; /* 5.04:1 on paper */
 --c-warning-wash: #F7EED8;

 /* ---------- Booking / member status chips ---------- */
 --c-chip-booked-bg: #E4ECFA; --c-chip-booked-fg: #1E3A7A;
 --c-chip-waitlist-bg: #EEE8F8; --c-chip-waitlist-fg: #5E4A9E;
 --c-chip-checked-bg: #E3F2EC; --c-chip-checked-fg: #247056;
 --c-chip-cancelled-bg: #F8E6EA; --c-chip-cancelled-fg: #B83A4E;
 --c-chip-open-bg: #E8ECF6; --c-chip-open-fg: #6B6F8A;
 --c-chip-intro-bg: #E8EAF8; --c-chip-intro-fg: #3D2F6F;
 --c-chip-noshow-bg: #F7EED8; --c-chip-noshow-fg: #8F6015;

 /* ---------- Chart series (fixed order; label thin light series) ---------- */
 --c-series-1: #2B5FBF; /* Cobalt — 5.56:1 lines OK */
 --c-series-2: #5E4A9E; /* Violet — 6.59:1 lines OK */
 --c-series-3: #4A8FE3; /* Azure — 3.07:1 AA-LG / fills+labels */
 --c-series-4: #8B6FCF; /* Iris — 3.68:1 AA-LG / fills+labels */
 --c-series-5: #1E3A7A; /* Navy — 10.00:1 lines OK */
 --c-series-6: #8BB8F0; /* Sky — fills only, never thin lines */

 /* ---------- Type families (house craft reuse) ---------- */
 --font-display: "Ring-Display", "Ring", sans-serif; /* lowercase only; never body */
 --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
 --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
 --font-quote: "Fraunces", Georgia, "Times New Roman", serif; /* Light Italic, one per layout max */
 --font-email-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
 --font-email-mono: "Courier New", Courier, monospace;

 /* ---------- Type scale — marketing (desktop @1440) ---------- */
 --fs-display: 4.5rem; /* 72px Ring — hero */
 --fs-display-sm: 3.5rem; /* 56px Ring — section */
 --fs-h1: 2.75rem; /* 44px Ring or Hanken 600 */
 --fs-h2: 2rem; /* 32px Hanken 600 */
 --fs-h3: 1.375rem; /* 22px Hanken 600 */
 --fs-h4: 1.125rem; /* 18px Hanken 600 */
 --fs-lead: 1.25rem; /* 20px Hanken 400 */
 --fs-body: 1rem; /* 16px Hanken 400 */
 --fs-small: 0.875rem; /* 14px */
 --fs-caption: 0.75rem; /* 12px */
 --fs-eyebrow: 0.8125rem; /* 13px Geist Mono 500 caps +22% */
 --fs-label: 0.75rem; /* 12px Geist Mono 500 caps +16% */
 --fs-button: 0.875rem; /* 14px Geist Mono 600 caps +16% */

 /* ---------- Type scale — app UI (slightly tighter) ---------- */
 --fs-app-h1: 1.5rem; /* 24px Hanken 600 */
 --fs-app-h2: 1.125rem; /* 18px Hanken 600 */
 --fs-app-body: 0.875rem; /* 14px Hanken 400 */
 --fs-app-small: 0.8125rem; /* 13px */
 --fs-app-label: 0.6875rem; /* 11px Geist Mono 500 caps +16% */
 --fs-app-table: 0.8125rem; /* 13px Hanken 400 */

 /* ---------- Mobile type (≤640) ---------- */
 --fs-m-display: 2.75rem; /* 44px */
 --fs-m-h1: 2rem; /* 32px */
 --fs-m-h2: 1.5rem; /* 24px */
 --fs-m-lead: 1.125rem; /* 18px */
 --fs-m-body: 1rem; /* 16px */

 --lh-display: 1.02; --lh-h1: 1.08; --lh-h2: 1.15; --lh-h3: 1.25;
 --lh-lead: 1.45; --lh-body: 1.55; --lh-app: 1.45; --lh-caption: 1.4;

 --track-eyebrow: 0.22em; /* +22% */
 --track-label: 0.16em; /* +16% */
 --track-button: 0.16em; /* +16% */

 /* ---------- Spacing (base 4px) ---------- */
 --space-1: 0.25rem; /* 4 */
 --space-2: 0.5rem; /* 8 */
 --space-3: 0.75rem; /* 12 */
 --space-4: 1rem; /* 16 */
 --space-5: 1.5rem; /* 24 */
 --space-6: 2rem; /* 32 */
 --space-7: 3rem; /* 48 */
 --space-8: 4rem; /* 64 */
 --space-9: 6rem; /* 96 */
 --space-10: 8rem; /* 128 */

 /* ---------- Layout ---------- */
 --max-marketing: 1120px;
 --max-wide: 1280px;
 --max-app: 1440px;
 --gutter-d: 24px;
 --gutter-t: 20px;
 --gutter-m: 16px;
 --margin-min: 4.166%; /* ≥1/24 width */
 --sidebar-w: 240px;
 --topbar-h: 56px;

 /* ---------- Radii ---------- */
 --radius-card: 10px; /* cards @1440 — house craft */
 --radius-panel: 12px;
 --radius-input: 8px;
 --radius-pill: 999px;
 --radius-chip: 999px;
 --radius-modal: 14px;
 --radius-mark: 14px; /* favicon tile */

 /* ---------- Borders & elevation ---------- */
 --border: 1px solid var(--c-rule);
 --border-strong: 1px solid var(--c-rule-strong);
 --shadow-sm: 0 1px 2px rgba(26, 27, 58, 0.05), 0 1px 3px rgba(26, 27, 58, 0.04);
 --shadow-md: 0 4px 12px rgba(26, 27, 58, 0.07), 0 1px 3px rgba(26, 27, 58, 0.04);
 --shadow-lg: 0 12px 32px rgba(26, 27, 58, 0.10), 0 2px 6px rgba(26, 27, 58, 0.05);
 --shadow-focus: 0 0 0 3px rgba(43, 95, 191, 0.35);

 /* ---------- Motion (see DIRECTION.md §7) ---------- */
 --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* slow-in / controlled */
 --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* long exhale enters */
 --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exits */
 --ease-exhale: cubic-bezier(0.22, 0.61, 0.36, 1); /* alias of standard */
 --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1); /* sine inhale/exhale */

 --dur-instant: 80ms;
 --dur-fast: 120ms;
 --dur-base: 200ms;
 --dur-slow: 320ms;
 --dur-page: 400ms;
 --dur-draw: 560ms;
 --dur-count: 1000ms;
 --dur-breath-in: 4s;
 --dur-breath-out:6s;

 --stagger-roll: 50ms; /* Roll-Down; range 40–60ms */
 --rise-enter: 10px; /* section enter; range 8–12px */

 /* Spring params for JS (Motion / WAAPI) — Carriage ≤2% overshoot */
 --spring-carriage-mass: 1;
 --spring-carriage-stiffness: 280;
 --spring-carriage-damping: 28;
 --spring-press-mass: 1;
 --spring-press-stiffness: 500;
 --spring-press-damping: 36;

 /* ---------- White-label / studio theming hooks (DIRECTION §11) ----------
 Studios override --wl-* (or the aliased brand tokens). Structural
 tokens (radii craft defaults, type families, motion, shadows) stay
 PilatesCRM unless noted. Inject via :root[data-studio="…"] or inline style.
 ------------------------------------------------------------------ */
 --wl-primary: var(--c-cobalt); /* primary CTA / focus / links accent */
 --wl-secondary: var(--c-violet); /* secondary accent / eyebrows */
 --wl-ink: var(--c-ink); /* headlines + body */
 --wl-paper: var(--c-paper); /* page canvas */
 --wl-mark: url("../assets/mark.svg"); /* studio mark URL — override per studio */
 --wl-wordmark: "pilatescrm"; /* display wordmark string (Ring on public pages) */
 --wl-logo: var(--wl-mark); /* full logo lockup image if provided */
 --wl-radius: var(--radius-card); /* optional studio radius; default craft 10px */
 --wl-show-powered: 1; /* 1 = show “Powered by pilatescrm”; 0 = full WL hide */

 /* Semantic aliases used by client-facing surfaces (booking, portal, emails) */
 --brand-primary: var(--wl-primary);
 --brand-secondary: var(--wl-secondary);
 --brand-ink: var(--wl-ink);
 --brand-paper: var(--wl-paper);
}

/* studio skins — inject at runtime; not default PilatesCRM marketing */
:root[data-studio="north-shore"] {
 /* North Shore Reformer — default cool craft (same as product tokens) */
 --wl-primary: #2B5FBF;
 --wl-secondary: #5E4A9E;
 --wl-ink: #1A1B3A;
 --wl-paper: #F4F6FB;
 --wl-wordmark: "North Shore Reformer";
 --wl-show-powered: 1;
}

:root[data-studio="harbor-reform"] {
 /* Alternate skin — teal primary / warm paper ( only) */
 --wl-primary: #1F6B5C;
 --wl-secondary: #5B4A8A;
 --wl-ink: #1A2430;
 --wl-paper: #F3F7F5;
 --c-cobalt: var(--wl-primary);
 --c-violet: var(--wl-secondary);
 --c-ink: var(--wl-ink);
 --c-paper: var(--wl-paper);
 --c-focus: var(--wl-primary);
 --c-navy: #164E44;
 --c-wash-sky: #E3F0EC;
 --shadow-focus: 0 0 0 3px rgba(31, 107, 92, 0.35);
 --wl-wordmark: "Harbor Reform";
 --wl-show-powered: 0; /* fully white-labeled — no CRM footer chrome */
}

/* Map brand aliases onto common component tokens when WL is active */
[data-wl="client"] {
 --c-cobalt: var(--wl-primary);
 --c-violet: var(--wl-secondary);
 --c-ink: var(--wl-ink);
 --c-paper: var(--wl-paper);
 --c-focus: var(--wl-primary);
 background: var(--wl-paper);
 color: var(--wl-ink);
}