/**
 * CARE app shell — token layer (definition only).
 * Maps semantic roles to values. Consumed by care-app-shell.css.
 * Theme: system default; override with data-care-theme="light" | "dark" on <html>.
 * Theme-varying colors are declared once via light-dark(light, dark); the theme
 * attribute only flips color-scheme.
 */

:root {
    color-scheme: light dark;

    /* —— Type scale (fluid where noted) —— */
    --care-app-type-family-body: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    --care-app-type-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
    --care-app-type-size-caption: 0.8125rem;
    --care-app-type-size-body: 1rem;
    --care-app-type-size-lead: 1.0625rem;
    --care-app-type-size-heading-3: clamp(1rem, 2.5vw, 1.125rem);
    --care-app-type-size-heading-2: clamp(1.125rem, 3vw, 1.35rem);
    --care-app-type-size-heading-1: clamp(1.35rem, 4vw, 1.75rem);
    --care-app-type-weight-body: 400;
    --care-app-type-weight-heading: 650;
    --care-app-type-leading-tight: 1.25;
    --care-app-type-leading-snug: 1.4;
    --care-app-type-leading-body: 1.55;
    --care-app-type-tracking-heading: -0.02em;

    /* —— Space scale —— */
    --care-app-space-2xs: 0.125rem;
    --care-app-space-xs: 0.25rem;
    --care-app-space-sm: 0.5rem;
    --care-app-space-md: 1rem;
    --care-app-space-lg: 1.5rem;
    --care-app-space-xl: 2rem;
    --care-app-space-2xl: 2.75rem;
    --care-app-space-section: var(--care-app-space-xl);

    /* —— Shape —— */
    --care-app-radius-sm: 0.375rem;
    --care-app-radius-md: 0.5rem;
    --care-app-radius-lg: 0.75rem;
    --care-app-radius-pill: 999px;
    --care-app-border-width-hairline: 1px;
    --care-app-border-width-emphasis: 2px;

    /* —— Elevation —— */
    --care-app-shadow-none: none;
    --care-app-shadow-raised: 0 1px 2px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.35));
    /* Dark spreads the floating shadow further — see the non-color theme deltas below. */
    --care-app-shadow-floating: 0 12px 40px rgb(15 23 42 / 0.1);

    /* —— Overlays (dialogs, pricing lightbox) —— */
    --care-app-overlay-backdrop: light-dark(rgb(15 23 42 / 0.48), rgb(0 0 0 / 0.62));
    --care-app-overlay-backdrop-blur: 14px;

    /* —— Motion (respect reduced-motion in tokens + shell) —— */
    --care-app-motion-duration: 0.15s;
    --care-app-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --care-app-motion-duration-interaction: var(--care-app-motion-duration);

    /* —— Layout —— */
    /* Readable line length for callouts / flash only — not the main app column width */
    --care-app-measure-prose: min(72ch, 100%);
    /* Enterprise admin: use the display; mobile stays full width via padding */
    --care-app-width-shell-max: min(100%, 90rem);
    --care-app-width-shell-pad-inline: var(--care-app-space-md);
    --care-app-width-shell-pad-block: var(--care-app-space-xl);

    /* Canonical layout widths (literals in @media — custom props cannot feed media queries).
       Desktop First: unscoped = wide; overrides use max-width only (never a parallel min-width: 48rem block).
       - narrow: @media (max-width: 47.99rem) — default; shell drawer, stack grids, etc.
       - phone (optional): @media (max-width: 29.99rem) — only when narrow still leaves an unusable phone layout.
       Do not invent other width steps (no 560px / 620px / 680px / 767px / 920px / …).
       Exception: care-presenter may also use max-height for small physical screens. */

    /* —— Semantic color: canvas & surfaces —— */
    --care-app-color-canvas: light-dark(#f4f7fb, #0b1220);
    --care-app-color-canvas-tint: radial-gradient(ellipse 120% 80% at 50% -20%, light-dark(rgb(14 165 233 / 0.08), rgb(56 189 248 / 0.12)), transparent 55%);
    --care-app-color-surface-default: light-dark(#ffffff, #151f32);
    --care-app-color-surface-subtle: light-dark(rgb(15 23 42 / 0.04), rgb(255 255 255 / 0.06));
    --care-app-color-surface-elevated: light-dark(#ffffff, #1a2740);
    --care-app-color-surface-muted: light-dark(#f1f5f9, rgb(255 255 255 / 0.08));
    --care-app-color-surface-raised: light-dark(#f8fafc, rgb(255 255 255 / 0.06));

    /* Amber “watch” band (dashboard + badges) */
    --care-app-color-caution-ink: light-dark(#92400e, #fde68a);
    --care-app-color-caution-surface: light-dark(#fffbeb, rgb(120 53 15 / 0.42));
    --care-app-color-caution-border: light-dark(#fde68a, rgb(251 191 36 / 0.45));

    /* Semantic aliases (link / muted text). */
    --care-app-color-link: var(--care-app-color-accent);
    --care-app-color-accent-primary: var(--care-app-color-accent);
    --care-app-color-text-muted: var(--care-app-color-ink-muted);

    /* —— Semantic color: ink —— */
    --care-app-color-ink-primary: light-dark(#0f172a, #f1f5f9);
    --care-app-color-ink-secondary: light-dark(#334155, #cbd5e1);
    --care-app-color-ink-muted: light-dark(#64748b, #94a3b8);
    /* Dark inverts onto the dark control surface (#0f172a) instead of white. */
    --care-app-color-ink-on-accent: light-dark(#ffffff, #0f172a);

    /* —— Semantic color: borders —— */
    --care-app-color-border-subtle: light-dark(rgb(148 163 184 / 0.35), rgb(148 163 184 / 0.28));
    --care-app-color-border-strong: light-dark(rgb(37 99 235 / 0.35), rgb(96 165 250 / 0.4));

    /* —— Semantic color: accent & control —— */
    --care-app-color-accent: light-dark(#1d4ed8, #60a5fa);
    --care-app-color-accent-hover: light-dark(#1e40af, #93c5fd);
    --care-app-color-accent-muted-bg: light-dark(rgb(29 78 216 / 0.08), rgb(96 165 250 / 0.12));
    --care-app-color-control-bg: light-dark(#ffffff, #0f172a);
    --care-app-color-control-border: light-dark(rgb(148 163 184 / 0.55), rgb(148 163 184 / 0.35));
    --care-app-color-control-text: var(--care-app-color-ink-primary);

    /* —— Semantic color: status & feedback —— */
    --care-app-color-danger-ink: light-dark(#991b1b, #fecaca);
    --care-app-color-danger-surface: light-dark(rgb(254 226 226 / 0.85), rgb(127 29 29 / 0.45));
    --care-app-color-danger-border: light-dark(rgb(248 113 113 / 0.45), rgb(248 113 113 / 0.5));
    --care-app-color-danger-button-surface: light-dark(rgb(254 242 242 / 0.92), rgb(127 29 29 / 0.22));
    --care-app-color-danger-button-border: var(--care-app-color-danger-border);
    --care-app-color-danger-button-label: var(--care-app-color-danger-ink);
    --care-app-color-danger-button-fill: light-dark(#b91c1c, #dc2626);
    --care-app-color-danger-button-fill-hover: light-dark(#991b1b, #ef4444);
    --care-app-color-danger-button-ink: #ffffff;
    --care-app-color-success-ink: light-dark(#047857, #6ee7b7);
    --care-app-color-success-surface: light-dark(rgb(209 250 229 / 0.85), rgb(6 78 59 / 0.45));
    --care-app-color-success-border: rgb(52 211 153 / 0.45);
    --care-app-color-info-surface: light-dark(rgb(224 242 254 / 0.9), rgb(12 74 110 / 0.45));
    --care-app-color-info-border: light-dark(rgb(14 165 233 / 0.35), rgb(56 189 248 / 0.4));
    --care-app-color-info-ink: light-dark(#0369a1, #bae6fd);

    /* —— Semantic color: code —— */
    --care-app-color-code-surface: light-dark(rgb(15 23 42 / 0.06), rgb(255 255 255 / 0.08));
    --care-app-color-code-ink: light-dark(#0c4a6e, #e0f2fe);

    /* —— Focus —— */
    --care-app-focus-ring-width: 2px;
    --care-app-focus-ring-offset: 2px;
    --care-app-color-focus-ring: var(--care-app-color-accent);
    --care-app-color-focus-ring-contrast: #fbbf24;

    /* —— Link presentation —— */
    /* Rest: no underline. Hover underline is NOT global — opt in per surface. */
    --care-app-link-underline-default: none;
    --care-app-link-underline-interaction: underline;

    /* —— Table —— */
    --care-app-table-stripe: light-dark(rgb(15 23 42 / 0.03), rgb(255 255 255 / 0.04));

    /* Compatibility / short aliases → canonical tokens */
    --care-app-type-size-body-small: 0.875rem;
    --care-app-type-size-heading-sm: var(--care-app-type-size-heading-3);
    --care-app-font-size-sm: var(--care-app-type-size-caption);
    --care-app-type-leading-normal: var(--care-app-type-leading-body);
    --care-app-color-border: var(--care-app-color-border-subtle);
    --care-app-color-ink: var(--care-app-color-ink-primary);
    --care-app-color-surface: var(--care-app-color-surface-default);
    --care-app-color-muted-ink: var(--care-app-color-ink-muted);
    --care-app-color-link-hover: var(--care-app-color-accent-hover);
    --care-app-color-accent-info: var(--care-app-color-info-ink);
    --care-app-color-danger: var(--care-app-color-danger-ink);
}

/* Theme forcing: flips color-scheme — light-dark() above resolves the palette.
   The dark blocks also carry the non-color deltas, because light-dark() substitutes colors only. */
html.care-app[data-care-theme="light"] {
    color-scheme: light;
}

html.care-app[data-care-theme="dark"] {
    color-scheme: dark;

    --care-app-shadow-floating: 0 16px 48px rgb(0 0 0 / 0.45);
    --care-app-overlay-backdrop-blur: 40px;
}

@media (prefers-color-scheme: dark) {
    html.care-app:not([data-care-theme="light"]) {
        --care-app-shadow-floating: 0 16px 48px rgb(0 0 0 / 0.45);
        --care-app-overlay-backdrop-blur: 40px;
    }
}

/* Accessibility: higher contrast */
@media (prefers-contrast: more) {
    html.care-app {
        --care-app-border-width-hairline: 2px;
        --care-app-color-border-subtle: currentColor;
        --care-app-color-border-strong: currentColor;
        --care-app-link-underline-default: underline;
        --care-app-color-focus-ring: var(--care-app-color-focus-ring-contrast);
        --care-app-shadow-raised: var(--care-app-shadow-none);
        --care-app-shadow-floating: var(--care-app-shadow-none);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.care-app {
        --care-app-motion-duration: 0.001ms;
        --care-app-motion-duration-interaction: 0.001ms;
    }
}