/* ============================================================================
   Beyond This design tokens
   Generated from docs/design-system/tokens/ (fonts, colors, typography,
   spacing, effects, base) by the design-system sync (docs/design-system/SYNC.md).
   Do not hand-edit values here: change them in the design system, re-pull, and
   regenerate. No site-only extensions as of the 2026-10-02 sync.
   Load order on every page: tokens.css -> family stylesheet -> components.css
   -> legacy-aliases.css -> accessibility.css
   ========================================================================= */

/* ---- fonts (self-hosted, latin subset; files in static/fonts/) ---- */
/* Playfair Display + Montserrat (Google Fonts, OFL). Variable woff2, latin subset. */
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400 800;font-display:swap;src:url('../fonts/Montserrat-Italic-Variable.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/Montserrat-Variable.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;src:url('../fonts/PlayfairDisplay-Italic-Variable.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/PlayfairDisplay-Variable.woff2') format('woff2');}

/* ---- colors ---- */
/* Beyond This color tokens. Source: Carepartner + Facilities brand guides (hex values verbatim). */
:root{
/* Brand base */
--bt-plum:#5E2B68;          /* Deep Plum: emotional headlines, brand depth */
--bt-plum-700:#4A2152;      /* hover/pressed plum */
--bt-plum-ink:#260F2D;      /* sampled from logo wordmark */
--bt-plum-deep:#3C1542;     /* Four Phases PDF plum — couple-facing only; not used in facility decks */
--bt-navy-deep:#111D33;     /* Facility deck anchor: dark grounds, headlines, label bars */
--bt-coral:#F34A67;         /* Fire Coral: underlines, rules, key numbers, icons. Not for small text or under white text (3.5:1) */
--bt-coral-600:#DC3A58;     /* legacy hover; decorative only (4.38:1 with white) */
--bt-coral-fill:#C92E4E;    /* coral fill behind white text: primary button, coral badge (5.3:1) */
--bt-coral-fill-hover:#B12744; /* darker coral: fill hover/pressed; small coral text (site name) */
--bt-coral-700:var(--bt-coral-fill-hover); /* alias of --bt-coral-fill-hover */
--bt-coral-text:#B12744;    /* coral for small text on Mist, Paper, white (AA: 5.3 / 5.9 / 6.5:1) */
--bt-mauve:#C7B2B3;         /* Soft Mauve: quiet dividers, gentle fill */
--bt-pink:#F3A0C1;          /* Pastel Pink: user-facing cards, gentle highlight */
--bt-mist:#E9E7EA;          /* Mist: default couple-facing page background */
--bt-paper:#F3F4F6;         /* Paper: default facility-facing background */
--bt-navy:#1F2937;          /* Brand/Slate Navy: institutional anchor */
--bt-deep-blue:#0A142A;     /* Deep Blue: night, seriousness, limited grounding */
--bt-charcoal:#4C4651;      /* body copy when navy is too heavy */
--bt-stone:#6B7280;         /* Stone Gray (partner sheet): secondary meta text on white */
--bt-white:#FFFFFF;
/* Warm tints (derived from plum/mauve, used on brand-sheet panels) */
--bt-blush:#F6EDEF;
--bt-blush-200:#EFDFE3;
--bt-pink-100:#FBE3EC;
/* Neutral ramp: admin tables, forms, data screens only. Plum-warm, never true grey. Adopted from the live site. */
--bt-neutral-900:#2B2730;--bt-neutral-800:#4C4651;--bt-neutral-700:#625B67;--bt-neutral-600:#7D7781;--bt-neutral-500:#98939B;
--bt-neutral-400:#B3AFB6;--bt-neutral-300:#CECBD0;--bt-neutral-200:#E9E7EA;--bt-neutral-100:#F3F4F6;
/* Grayscale: PROBLEM STATE ONLY (The Chasm) */
--bt-gray-100:#EDEDED;--bt-gray-300:#BDBDBD;--bt-gray-500:#8A8A8A;--bt-gray-700:#555555;--bt-gray-900:#2A2A2A;
/* Brand gradients (from flame mark + sunset sky). Sparingly. */
--bt-gradient-flame:linear-gradient(160deg,#F34A67 0%,#B0336B 55%,#5E2B68 100%); /* @kind color */
--bt-gradient-sky:linear-gradient(180deg,#C7A0B4 0%,#F07A86 55%,#F34A67 100%); /* @kind color */
--bt-scrim-dark:linear-gradient(180deg,rgba(31,41,55,0) 0%,rgba(31,41,55,.82) 100%); /* @kind color */

/* Semantic aliases */
--bg-page:var(--bt-mist);
--bg-page-facility:var(--bt-paper);
--bg-warm:var(--bt-blush);
--bg-dark:var(--bt-navy);
--bg-night:var(--bt-deep-blue);
--bg-plum:var(--bt-plum);
--surface-card:var(--bt-white);
--surface-card-warm:var(--bt-pink-100);
--surface-card-dark:#2A3544;
--text-heading:var(--bt-plum);
--text-heading-facility:var(--bt-navy);
--text-body:var(--bt-charcoal);
--text-body-facility:var(--bt-navy);
--text-muted:#625B67;
--text-on-dark:var(--bt-white);
--text-on-dark-muted:#C9CDD4;
--text-accent:var(--bt-coral-text);
--text-link:var(--bt-plum);
--text-link-hover:var(--bt-coral-text);
--accent:var(--bt-coral);
--accent-hover:var(--bt-coral-600);
--accent-fill:var(--bt-coral-fill);
--accent-fill-hover:var(--bt-coral-fill-hover);
/* Primary button by surface. Public site + sign-in: plum. Member portal, facility portal, admin: coral fill.
   Portal pages set the portal values on their root (body.db-body on the live site, .bt-portal here). */
--btn-primary-bg:var(--bt-plum);
--btn-primary-hover:var(--bt-plum-700);
--btn-primary-fg:var(--bt-white);
--btn-primary-bg-portal:var(--bt-coral-fill);
--btn-primary-hover-portal:var(--bt-coral-fill-hover);
--border-subtle:#DDD8DE;
--border-default:var(--bt-mauve);
--border-strong:var(--bt-plum);
--divider-accent:var(--bt-coral);
--focus-ring:0 0 0 3px rgba(243,74,103,.45); /* @kind shadow */
--success:#2F7D5B;--warning:#B7791F;--danger:#C0392B;
}
.bt-portal,body.db-body{--btn-primary-bg:var(--btn-primary-bg-portal);--btn-primary-hover:var(--btn-primary-hover-portal)}

/* ---- typography ---- */
/* Playfair for the statement, Montserrat for the mechanism. */
:root{
--font-display:'Playfair Display',Georgia,'Times New Roman',serif;
--font-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;
/* Display (Playfair SemiBold/Bold) */
--type-display-xl:4.5rem;  /* 72 */
--type-display-lg:3.5rem;  /* 56 */
--type-h1:2.75rem;         /* 44 */
--type-h2:2.125rem;        /* 34 */
--type-h3:1.625rem;        /* 26 */
--type-quote:1.75rem;      /* 28 pull quotes */
/* Sans (Montserrat) — large for tired readers */
--type-title:1.25rem;      /* 20 section header */
--type-body-lg:1.1875rem;  /* 19 */
--type-body:1.0625rem;     /* 17 */
--type-small:0.9375rem;    /* 15 */
--type-label:0.8125rem;    /* 13 letterspaced caps */
--type-stat:3.5rem;        /* key numbers */
--leading-tight:1.1;--leading-snug:1.25;--leading-body:1.6;
--tracking-label:0.14em;--tracking-wide:0.32em; /* footer line "BEYOND THE CHASM." */
--tracking-display:-0.01em;
/* Semantic */
--heading-font:var(--font-display);--heading-weight:var(--weight-semibold);
--body-font:var(--font-sans);--body-weight:var(--weight-regular);
--label-font:var(--font-sans);--label-weight:var(--weight-bold);
}

/* ---- spacing ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--measure:62ch;            /* comfortable line length */
--container:1200px;--container-narrow:760px;
--gutter:clamp(20px,4vw,48px); /* @kind spacing */
--section-y:clamp(64px,9vw,128px); /* @kind spacing */
--hit-min:48px;            /* generous targets for low dexterity / one thumb */
}

/* ---- effects: radii, shadows, motion ---- */
:root{
--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
--radius-card:var(--radius-lg);--radius-button:var(--radius-pill);--radius-input:var(--radius-sm);
--border-width:1px;--divider-accent-width:3px;--divider-accent-length:48px;
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(38,15,45,.06),0 1px 1px rgba(38,15,45,.04);
--shadow-md:0 2px 4px rgba(38,15,45,.05),0 8px 24px rgba(38,15,45,.08);
--shadow-lg:0 4px 8px rgba(38,15,45,.06),0 20px 48px rgba(38,15,45,.14);
--shadow-card:var(--shadow-sm);--shadow-raised:var(--shadow-md);--shadow-overlay:var(--shadow-lg);
--ease-calm:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-inout:cubic-bezier(.45,0,.25,1); /* @kind other */

--dur-fast:150ms; /* @kind other */
--dur-base:250ms; /* @kind other */
--dur-slow:450ms; /* @kind other */
--dur-reveal:700ms; /* @kind other */

--overlay-scrim:rgba(10,20,42,.55); /* @kind color */
--panel-translucent:rgba(31,41,55,.78); /* @kind color */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-reveal:0ms; /* @kind other */
}}

/* ---- base ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-body);background:var(--bg-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}