/* App family layer: the client app and Portal V2 design language on a Runner page.
   Load it right after uds-runner-family.css. It only remaps the family tokens, so every
   rule written against --runner-family-* takes the app palette, type and shape by role.
   Sources: mobile_app/src/constants/colors.ts (Colors, chatPremiumLight) and Portal V2's
   portalV2CSS (radius, type and shadow roles). Playbook: quality-lift
   references/runner-app-family.md. Pages that have not opted in keep the Runner teal. */

:root {
    --runner-family-primary: #3D8385;
    --runner-family-primary-dark: #275960;
    --runner-family-primary-focus: rgba(61, 131, 133, 0.2);
    --runner-family-primary-focus-soft: rgba(61, 131, 133, 0.12);
    --runner-family-primary-focus-faint: rgba(61, 131, 133, 0.1);
    --runner-family-primary-subtle: rgba(61, 131, 133, 0.08);
    --runner-family-primary-hover: rgba(61, 131, 133, 0.055);
    --runner-family-primary-faint: rgba(61, 131, 133, 0.04);
    --runner-family-primary-border: #D3E3E3;
    --runner-family-primary-border-strong: #A9CFD0;
    --runner-family-logo-dark: #132531;
    --runner-family-logo-mid: #275960;
    --runner-family-logo-bright: #3D8385;
    --runner-family-orange: #FF8A24;
    --runner-family-orange-dark: #C96829;
    --runner-family-canvas: #F4F7F5;
    --runner-family-canvas-warm: #F4F7F5;
    --runner-family-surface-raised: #F7FAFA;
    --runner-family-border: #DCE6E3;
    --runner-family-border-light: #E4EBE8;
    --runner-family-border-translucent: rgba(220, 230, 227, 0.85);
    --runner-family-text: #19343C;
    --runner-family-muted: #5B6F73;
    --runner-family-soft: #7A898C;
    --runner-family-success: #15803D;
    --runner-family-warning-bg: #FFF0E7;
    --runner-family-warning-border: rgba(255, 138, 36, 0.34);
    --runner-family-neutral-tag-bg: #F7FAFA;
    --runner-family-neutral-tag-border: #DCE6E3;
    --runner-family-font-xs: 11px;
    --runner-family-font-sm: 13px;
    --runner-family-font-base: 13px;
    --runner-family-font-md: 14px;
    --runner-family-font-lg: 19px;
    --runner-family-radius-strict: 9px;
    --runner-family-radius-control: 12px;
    --runner-family-radius-surface: 16px;
    --runner-family-radius-shell: 20px;
    --runner-family-shadow-xs: 0 1px 4px rgba(19, 37, 49, 0.03);
    --runner-family-shadow-sm: 0 1px 3px rgba(19, 37, 49, 0.06);
    --runner-family-shadow-md: 0 4px 12px rgba(19, 37, 49, 0.06);
    --runner-family-shadow-card: 0 2px 8px rgba(19, 37, 49, 0.05);
    --runner-family-popover-shadow: 0 12px 28px rgba(19, 37, 49, 0.12), 0 2px 6px rgba(19, 37, 49, 0.05);
    /* Page titles, section headings and headline figures (logoTealDark). */
    --app-family-title-ink: #132531;
}

body {
    background: var(--runner-family-canvas);
    color: var(--runner-family-text);
}

/* Pages that still read the settlement-era variables (settlement-variables.css) opt in with
   <body class="app-family-legacy">, which points those names at the family tokens. */
.app-family-legacy {
    --primary: var(--runner-family-primary);
    --primary-dark: var(--runner-family-primary-dark);
    --primary-faint: var(--runner-family-primary-faint);
    --primary-subtle: var(--runner-family-primary-subtle);
    --primary-border: var(--runner-family-primary-border);
    --border-focus: var(--runner-family-primary);
    --text-primary: var(--runner-family-text);
    --text-secondary: var(--runner-family-muted);
    --text-light: var(--runner-family-soft);
    --background: var(--runner-family-canvas);
    --border: var(--runner-family-border);
    --border-light: var(--runner-family-border-light);
}