/** * 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 . */ :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 rgb(15 23 42 / 0.06); --care-app-shadow-floating: 0 12px 40px rgb(15 23 42 / 0.1); /* —— 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); /* —— Semantic color: canvas & surfaces —— */ --care-app-color-canvas: #f4f7fb; --care-app-color-canvas-tint: radial-gradient(ellipse 120% 80% at 50% -20%, rgb(14 165 233 / 0.08), transparent 55%); --care-app-color-surface-default: #ffffff; --care-app-color-surface-subtle: rgb(15 23 42 / 0.04); --care-app-color-surface-elevated: var(--care-app-color-surface-default); --care-app-color-surface-muted: #f1f5f9; --care-app-color-surface-raised: #f8fafc; /* Amber “watch” band (dashboard + badges) */ --care-app-color-caution-ink: #92400e; --care-app-color-caution-surface: #fffbeb; --care-app-color-caution-border: #fde68a; /* Aliases (track accent / ink when theme switches) */ --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: #0f172a; --care-app-color-ink-secondary: #334155; --care-app-color-ink-muted: #64748b; --care-app-color-ink-on-accent: #ffffff; /* —— Semantic color: borders —— */ --care-app-color-border-subtle: rgb(148 163 184 / 0.35); --care-app-color-border-strong: rgb(37 99 235 / 0.35); /* —— Semantic color: accent & control —— */ --care-app-color-accent: #1d4ed8; --care-app-color-accent-hover: #1e40af; --care-app-color-accent-muted-bg: rgb(29 78 216 / 0.08); --care-app-color-control-bg: var(--care-app-color-surface-default); --care-app-color-control-border: rgb(148 163 184 / 0.55); --care-app-color-control-text: var(--care-app-color-ink-primary); /* —— Semantic color: status & feedback —— */ --care-app-color-danger-ink: #991b1b; --care-app-color-danger-surface: rgb(254 226 226 / 0.85); --care-app-color-danger-border: rgb(248 113 113 / 0.45); --care-app-color-danger-button-surface: rgb(254 242 242 / 0.92); --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: #b91c1c; --care-app-color-danger-button-fill-hover: var(--care-app-color-danger-ink); --care-app-color-danger-button-ink: var(--care-app-color-ink-on-accent); --care-app-color-success-ink: #047857; --care-app-color-success-surface: rgb(209 250 229 / 0.85); --care-app-color-success-border: rgb(52 211 153 / 0.45); --care-app-color-info-surface: rgb(224 242 254 / 0.9); --care-app-color-info-border: rgb(14 165 233 / 0.35); --care-app-color-info-ink: #0369a1; /* —— Semantic color: code —— */ --care-app-color-code-surface: rgb(15 23 42 / 0.06); --care-app-color-code-ink: #0c4a6e; /* —— 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 —— */ --care-app-link-underline-default: none; --care-app-link-underline-interaction: underline; /* —— Table —— */ --care-app-table-stripe: rgb(15 23 42 / 0.03); } /* System dark */ @media (prefers-color-scheme: dark) { html.care-app:not([data-care-theme="light"]) { color-scheme: dark; --care-app-color-canvas: #0b1220; --care-app-color-canvas-tint: radial-gradient(ellipse 120% 80% at 50% -20%, rgb(56 189 248 / 0.12), transparent 55%); --care-app-color-surface-default: #151f32; --care-app-color-surface-subtle: rgb(255 255 255 / 0.06); --care-app-color-surface-elevated: #1a2740; --care-app-color-surface-muted: rgb(255 255 255 / 0.08); --care-app-color-surface-raised: var(--care-app-color-surface-subtle); --care-app-color-caution-ink: #fde68a; --care-app-color-caution-surface: rgb(120 53 15 / 0.42); --care-app-color-caution-border: rgb(251 191 36 / 0.45); --care-app-color-ink-primary: #f1f5f9; --care-app-color-ink-secondary: #cbd5e1; --care-app-color-ink-muted: #94a3b8; --care-app-color-border-subtle: rgb(148 163 184 / 0.28); --care-app-color-border-strong: rgb(96 165 250 / 0.4); --care-app-color-accent: #60a5fa; --care-app-color-accent-hover: #93c5fd; --care-app-color-accent-muted-bg: rgb(96 165 250 / 0.12); --care-app-color-control-bg: #0f172a; --care-app-color-control-border: rgb(148 163 184 / 0.35); --care-app-color-control-text: var(--care-app-color-ink-primary); --care-app-color-ink-on-accent: var(--care-app-color-control-bg); --care-app-color-danger-ink: #fecaca; --care-app-color-danger-surface: rgb(127 29 29 / 0.45); --care-app-color-danger-border: rgb(248 113 113 / 0.5); --care-app-color-danger-button-surface: 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: #dc2626; --care-app-color-danger-button-fill-hover: #ef4444; --care-app-color-danger-button-ink: #ffffff; --care-app-color-success-ink: #6ee7b7; --care-app-color-success-surface: rgb(6 78 59 / 0.45); --care-app-color-success-border: rgb(52 211 153 / 0.45); --care-app-color-info-surface: rgb(12 74 110 / 0.45); --care-app-color-info-border: rgb(56 189 248 / 0.4); --care-app-color-info-ink: #bae6fd; --care-app-color-code-surface: var(--care-app-color-surface-muted); --care-app-color-code-ink: #e0f2fe; --care-app-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.35); --care-app-shadow-floating: 0 16px 48px rgb(0 0 0 / 0.45); --care-app-table-stripe: rgb(255 255 255 / 0.04); } } /* Explicit dark (always dark regardless of OS) */ html.care-app[data-care-theme="dark"] { color-scheme: dark; --care-app-color-canvas: #0b1220; --care-app-color-canvas-tint: radial-gradient(ellipse 120% 80% at 50% -20%, rgb(56 189 248 / 0.12), transparent 55%); --care-app-color-surface-default: #151f32; --care-app-color-surface-subtle: rgb(255 255 255 / 0.06); --care-app-color-surface-elevated: #1a2740; --care-app-color-surface-muted: rgb(255 255 255 / 0.08); --care-app-color-surface-raised: var(--care-app-color-surface-subtle); --care-app-color-caution-ink: #fde68a; --care-app-color-caution-surface: rgb(120 53 15 / 0.42); --care-app-color-caution-border: rgb(251 191 36 / 0.45); --care-app-color-ink-primary: #f1f5f9; --care-app-color-ink-secondary: #cbd5e1; --care-app-color-ink-muted: #94a3b8; --care-app-color-border-subtle: rgb(148 163 184 / 0.28); --care-app-color-border-strong: rgb(96 165 250 / 0.4); --care-app-color-accent: #60a5fa; --care-app-color-accent-hover: #93c5fd; --care-app-color-accent-muted-bg: rgb(96 165 250 / 0.12); --care-app-color-control-bg: #0f172a; --care-app-color-control-border: rgb(148 163 184 / 0.35); --care-app-color-control-text: var(--care-app-color-ink-primary); --care-app-color-ink-on-accent: var(--care-app-color-control-bg); --care-app-color-danger-ink: #fecaca; --care-app-color-danger-surface: rgb(127 29 29 / 0.45); --care-app-color-danger-border: rgb(248 113 113 / 0.5); --care-app-color-danger-button-surface: 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: #dc2626; --care-app-color-danger-button-fill-hover: #ef4444; --care-app-color-danger-button-ink: #ffffff; --care-app-color-success-ink: #6ee7b7; --care-app-color-success-surface: rgb(6 78 59 / 0.45); --care-app-color-success-border: rgb(52 211 153 / 0.45); --care-app-color-info-surface: rgb(12 74 110 / 0.45); --care-app-color-info-border: rgb(56 189 248 / 0.4); --care-app-color-info-ink: #bae6fd; --care-app-color-code-surface: var(--care-app-color-surface-muted); --care-app-color-code-ink: #e0f2fe; --care-app-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.35); --care-app-shadow-floating: 0 16px 48px rgb(0 0 0 / 0.45); --care-app-table-stripe: rgb(255 255 255 / 0.04); } /* Forced light palette (e.g. user choice while OS is dark) */ html.care-app[data-care-theme="light"] { color-scheme: light; --care-app-color-canvas: #f4f7fb; --care-app-color-canvas-tint: radial-gradient(ellipse 120% 80% at 50% -20%, rgb(14 165 233 / 0.08), transparent 55%); --care-app-color-surface-default: #ffffff; --care-app-color-surface-subtle: rgb(15 23 42 / 0.04); --care-app-color-surface-elevated: var(--care-app-color-surface-default); --care-app-color-surface-muted: #f1f5f9; --care-app-color-surface-raised: #f8fafc; --care-app-color-caution-ink: #92400e; --care-app-color-caution-surface: #fffbeb; --care-app-color-caution-border: #fde68a; --care-app-color-ink-primary: #0f172a; --care-app-color-ink-secondary: #334155; --care-app-color-ink-muted: #64748b; --care-app-color-border-subtle: rgb(148 163 184 / 0.35); --care-app-color-border-strong: rgb(37 99 235 / 0.35); --care-app-color-accent: #1d4ed8; --care-app-color-accent-hover: #1e40af; --care-app-color-accent-muted-bg: rgb(29 78 216 / 0.08); --care-app-color-control-bg: var(--care-app-color-surface-default); --care-app-color-control-border: rgb(148 163 184 / 0.55); --care-app-color-control-text: var(--care-app-color-ink-primary); --care-app-color-ink-on-accent: #ffffff; --care-app-color-danger-ink: #991b1b; --care-app-color-danger-surface: rgb(254 226 226 / 0.85); --care-app-color-danger-border: rgb(248 113 113 / 0.45); --care-app-color-danger-button-surface: rgb(254 242 242 / 0.92); --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: #b91c1c; --care-app-color-danger-button-fill-hover: var(--care-app-color-danger-ink); --care-app-color-danger-button-ink: var(--care-app-color-ink-on-accent); --care-app-color-success-ink: #047857; --care-app-color-success-surface: rgb(209 250 229 / 0.85); --care-app-color-success-border: rgb(52 211 153 / 0.45); --care-app-color-info-surface: rgb(224 242 254 / 0.9); --care-app-color-info-border: rgb(14 165 233 / 0.35); --care-app-color-info-ink: #0369a1; --care-app-color-code-surface: rgb(15 23 42 / 0.06); --care-app-color-code-ink: #0c4a6e; --care-app-shadow-raised: 0 1px 2px rgb(15 23 42 / 0.06); --care-app-shadow-floating: 0 12px 40px rgb(15 23 42 / 0.1); --care-app-table-stripe: rgb(15 23 42 / 0.03); } /* 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; } }