/* Care design system tokens — copied verbatim from the bound mobile system.
   Do not edit values here. The app is the source; this is a copy.
   Only the @font-face src paths differ, because the fonts are woff2 here.
*/

/* --- colors --- */
/* Primitives — exact values from app/src/theme/colors.ts */
:root{
--black:#000000;--carbon:#18181B;--zinc:#71717A;--ash:#A1A1AA;--mist:#E4E4E7;--fog:#F4F4F5;--white:#FFFFFF;
--coral:#FC5F2B;--coral-light:#FF8B64;--teal:#16B88A;--gold:#EAB308;--magenta:#F0529C;--periwinkle:#7C93F0;
--coral-100:#FFE5DD;--coral-300:#FDA78A;--coral-700:#CF4E23;--coral-900:#97391A;
--error-100:#FDE3EF;--error-300:#F7A0C9;--error-700:#C54380;--error-900:#90315E;
--success-100:#DAF4EC;--success-300:#7FD8BF;--success-700:#129771;--success-900:#0D6E53;
--warning-100:#FCF3D7;--warning-300:#F3D577;--warning-700:#C09307;--warning-900:#8C6B05;
--info-100:#EAEEFD;--info-300:#B7C4F7;--info-700:#6679C5;--info-900:#4A5890;
}
/* Semantic aliases — 1:1 with the semantic keys in colors.ts */
:root{
--text-primary:var(--carbon);--text-secondary:var(--zinc);--text-tertiary:var(--ash);--text-inverse:var(--white);
--text-link:var(--coral);--text-error:var(--error-700);--text-disabled:var(--ash);
--border-hairline:var(--mist);--surface-page:var(--white);--surface-muted:var(--fog);--surface-inverse:var(--carbon);
--accent-primary:var(--coral);
--icon-primary:var(--carbon);--icon-secondary:var(--zinc);--icon-tertiary:var(--ash);--icon-inverse:var(--white);--icon-accent:var(--coral);--icon-chip-bg-neutral:var(--fog);
--button-primary-bg:var(--carbon);--button-primary-text:var(--white);--button-primary-bg-pressed:rgba(24,24,27,.85);
--button-primary-bg-disabled:var(--fog);--button-primary-text-disabled:var(--ash);
--button-secondary-bg:var(--white);--button-secondary-text:var(--carbon);--button-secondary-border:var(--mist);
--button-ghost-text:var(--zinc);
--button-destructive-bg:var(--magenta);--button-destructive-bg-pressed:var(--error-700);--button-destructive-text:var(--white);
--input-bg:var(--fog);--input-bg-outline:var(--white);--input-text:var(--carbon);--input-placeholder:var(--ash);
--input-border:var(--mist);--input-border-focused:var(--coral);--input-bg-error:var(--error-100);--input-border-error:var(--magenta);
--input-text-disabled:var(--ash);--input-bg-disabled:var(--fog);
--card-bg:var(--white);--card-border:var(--mist);--card-bg-pressed:var(--fog);--card-border-selected:var(--coral);
--card-bg-disabled:var(--fog);--card-text-disabled:var(--ash);
--nav-bg:var(--white);--nav-border:var(--mist);--nav-active:var(--carbon);--nav-inactive:var(--ash);--nav-trailing-action:var(--coral);
--avatar-bg:var(--coral);--avatar-photo-bg:var(--fog);--avatar-status-online:var(--teal);
--progress-fill:var(--coral);--progress-track:var(--mist);--progress-fill-error:var(--magenta);
--list-row-border:var(--mist);--list-row-chevron:var(--ash);--list-row-bg-pressed:var(--fog);
--list-row-text-disabled:var(--ash);--list-row-text-destructive:var(--magenta);
--radio-selected:var(--coral);--radio-unselected:var(--mist);
--checkbox-checked-bg:var(--coral);--checkbox-checked-icon:var(--white);--checkbox-unchecked-border:var(--mist);
--switch-on:var(--coral);--switch-off:var(--mist);--switch-knob:var(--white);
--tab-active:var(--carbon);--tab-inactive:var(--ash);--tab-badge-bg:var(--coral);--tab-badge-text:var(--white);
--badge-bg:rgba(255,255,255,.92);--badge-text:var(--carbon);
--badge-success-bg:var(--success-100);--badge-success-text:var(--success-700);
--badge-warning-bg:var(--warning-100);--badge-warning-text:var(--warning-700);
--badge-error-bg:var(--error-100);--badge-error-text:var(--error-700);
--badge-info-bg:var(--info-100);--badge-info-text:var(--info-700);
--data-optimal:var(--teal);--data-normal:var(--gold);--data-out-of-range:var(--magenta);--insight-accent-secondary:var(--periwinkle);
--toast-bg:var(--carbon);--toast-text:var(--white);--overlay-backdrop:rgba(0,0,0,.45);
--dropdown-selected:var(--coral);--dropdown-row-disabled-text:var(--ash);
--loading-indicator:var(--coral);--skeleton:var(--fog);
--step-completed-bg:var(--coral);--step-completed-icon:var(--white);--step-upcoming-border:var(--mist);--step-upcoming-text:var(--ash);
--search-cancel-text:var(--coral);--sheet-close-icon:var(--ash);--sheet-footer-border:var(--mist);
--control-disabled-bg:var(--fog);--control-disabled-border:var(--mist);--control-disabled-fg:var(--ash);
--semantic-error:var(--magenta);--semantic-success:var(--teal);--semantic-warning:var(--gold);--semantic-info:var(--periwinkle);
}

/* --- typography --- */
/* 8-step reading scale. Sizes / line-heights / tracking are the measured
   values from app/src/theme/typography.ts (em tracking restored here, since
   CSS supports it natively where React Native did not). */
:root{
--text-display:66px;--leading-display:1;--tracking-display:-.025em;--weight-display:400;
--text-heading-lg:45px;--leading-heading-lg:1.13;--tracking-heading-lg:-.015em;--weight-heading-lg:400;
--text-heading:30px;--leading-heading:1.2;--tracking-heading:-.013em;--weight-heading:400;
--text-heading-sm:22px;--leading-heading-sm:1.25;--tracking-heading-sm:-.012em;--weight-heading-sm:500;
--text-subheading:19px;--leading-subheading:1.4;--tracking-subheading:-.009em;--weight-subheading:400;
--text-body-lg:17px;--leading-body-lg:1.4;--tracking-body-lg:-.009em;--weight-body-lg:400;
--text-body:15px;--leading-body:1.5;--tracking-body:-.005em;--weight-body:400;
--text-caption:11px;--leading-caption:1.5;--tracking-caption:-.005em;--weight-caption:400;
/* Eyebrow label convention — 11px Medium, uppercase, +0.08em */
--text-eyebrow:11px;--leading-eyebrow:14px;--tracking-eyebrow:.08em;--weight-eyebrow:500;
/* Dropdown section header — Satoshi Medium at 0.05em; a third, real tracking value */
--tracking-label:.05em;
/* UI text metrics: control labels use tighter line-heights and ZERO tracking,
   deliberately not the reading scale above. */
--text-ui-lg:17px;--leading-ui-lg:22px;
--text-ui:15px;--leading-ui:18px;
--text-ui-sm:13px;--leading-ui-sm:16px;
--text-ui-xs:12px;--leading-ui-xs:16px;
--text-large-title:34px;--leading-large-title:42px;
}

/* --- radius --- */
:root{
--radius-sm:6px;--radius-icon:8px;--radius-md:16px;--radius-pill:9999px;
--radius-swatch:var(--radius-sm);--radius-icon-tile:var(--radius-icon);--radius-button:var(--radius-md);
--radius-avatar:var(--radius-pill);--radius-input:var(--radius-md);--radius-card:var(--radius-md);
--radius-nav:var(--radius-md);--radius-list-row:var(--radius-md);--radius-radio:var(--radius-pill);
--radius-checkbox:var(--radius-pill);--radius-badge:var(--radius-pill);--radius-range-bar:var(--radius-pill);
--radius-insight-card:var(--radius-md);--radius-dialog:var(--radius-md);--radius-sheet:var(--radius-md);
--radius-toast:var(--radius-pill);--radius-skeleton:var(--radius-sm);
}

/* --- elevation --- */
/* Two shadows only, both measured. Elevation is deliberately almost absent:
   most cards have none at all. */
:root{
--shadow-elevated:0 2px 2px rgba(0,0,0,.05);  /* Card elevated, TabBar, Dropdown */
--shadow-knob:0 2px 2px rgba(0,0,0,.15);      /* Switch knob only */
--border-width-hairline:1px;--border-width-focus:2px;
--motion-switch:150ms linear; /* @kind other */
--motion-spin:1000ms linear; /* @kind other */
--motion-shimmer:1200ms linear; /* @kind other */
}

/* --- spacing --- */
/* Spacing primitives — the exact non-uniform set the system uses. Not a 4/8 grid. */
:root{
--spacing-4:4px;--spacing-8:8px;--spacing-11:11px;--spacing-12:12px;--spacing-16:16px;
--spacing-19:19px;--spacing-20:20px;--spacing-24:24px;--spacing-28:28px;--spacing-60:60px;
--space-element-gap:var(--spacing-11);
--space-input-padding-x:var(--spacing-16);
--space-list-row-padding-y:var(--spacing-16);
--space-list-row-padding-x:var(--spacing-20);
--space-nav-padding-y:var(--spacing-12);
--space-nav-padding-x:var(--spacing-19);
--space-nav-item-gap:var(--spacing-24);
--space-card-padding:var(--spacing-19);
--space-button-padding-x:var(--spacing-28);
}

/* --- gradients --- */
/* Imagery fades + the range-bar track. Geometry is the measured stop geometry. */
:root{
--gradient-range-track:linear-gradient(90deg,var(--data-optimal) 0%,var(--data-optimal) 60%,var(--data-normal) 78%,var(--data-out-of-range) 92%,var(--data-out-of-range) 100%);
--range-track-opacity:.35; /* @kind other */
/* Bottom Fade — hero/category imagery. Radial, ellipse at 50% 33.91%, 65.205% x 53.695% */
--fade-bottom:radial-gradient(ellipse 65.205% 53.695% at 50% 33.91%,rgba(0,0,0,1) 45%,rgba(0,0,0,.15) 80%,rgba(0,0,0,0) 100%); /* @kind color */
/* Full Vignette — circular clip + edge feather */
--fade-vignette:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,1) 44.46%,rgba(0,0,0,.32) 75%,rgba(0,0,0,0) 100%); /* @kind color */
/* Warm Glow — soft coral radial behind illustrations and emphasis content */
--glow-warm:radial-gradient(circle at 50% 50%,rgba(252,95,43,.25) 0%,rgba(252,95,43,0) 70%); /* @kind color */
/* Content Overflow Fade — truncated lists, 180deg transparent -> page */
--fade-overflow:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--surface-page) 100%);
}

/* --- motion --- */
/* Keyframes used by components. Motion in this system is minimal:
   a 150ms linear switch, a continuous 1s spin, a 1.2s shimmer sweep.
   No bounces, no spring easing, no decorative entrance animation. */
@keyframes care-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes care-shimmer{from{transform:translateX(-50%)}to{transform:translateX(200%)}}

/* --- fonts --- */
/* Satoshi — Fontshare, ITF Free Font License. Only Regular (400) and Medium
   (500) ship; the type scale uses no other weight. "Bold" in this system means
   Satoshi Medium, never a true 700 — a heavier label is the browser faking one. */
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{--font-sans:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;--font-weight-regular:400;--font-weight-medium:500}