/* ============================================================ CareTrust Design System - tokens.css v2.2 (2026-08-10) THE ONLY FILE WITH RAW VALUES. Change a raw value here and every screen inherits it. Load order: tokens → base → components → layouts → (theme swap via data-portal) ============================================================ */ :root { /* ── RAW PALETTE ──────────────────────────────────────────── */ --raw-lime: #A3E635; /* canonical action for wallet + widget */ --raw-lime-strong: #84CC16; /* hover / pressed */ --raw-lime-deep: #4D7C0F; /* text on pale, decorative deep; 4.6:1 on white (D-C10-309) */ --raw-lime-pale: #ECFCCB; /* tinted panel, active row */ --raw-lime-ray: #D9F99D; /* D2 mark spokes only */ --raw-blue: #2F5E85; /* canonical action for console */ --raw-blue-strong: #244A6B; --raw-blue-pale: #E3EAF2; --raw-blue-line: #C8D6E6; --raw-navy: #0D1F2D; /* ink; console sidebar; widget shell */ --raw-navy-soft: #203446; --raw-off-white: #F7F6F4; /* body bg */ --raw-white: #FFFFFF; /* surface */ --raw-line: #E2E0DC; /* border, divider */ --raw-line-strong: #D2CEC8; --raw-ink-soft: #6B6762; /* body muted */ --raw-ink-faint: #75716B; /* placeholder, icon-off; 4.85:1 on white (D-C10-309, BL-134) */ --raw-red: #C2410C; --raw-red-pale: #FDEDE5; --raw-amber: #B45309; --raw-amber-pale: #FDF3E1; --raw-green-deep: #3F6212; /* ── SEMANTIC: COLOUR ─────────────────────────────────────── */ --bg: var(--raw-off-white); --bg-alt: #EEECEA; --surface: var(--raw-white); --text: var(--raw-navy); --muted: var(--raw-ink-soft); --faint: var(--raw-ink-faint); --line: var(--raw-line); --line-strong: var(--raw-line-strong); /* action = the portal's primary interactive colour */ --action: var(--raw-lime); --action-strong: var(--raw-lime-strong); --action-deep: var(--raw-lime-deep); --action-pale: var(--raw-lime-pale); --action-contrast: var(--raw-navy); /* text ON the action colour; navy on lime ~10:1 (D-C10-309, BL-134) */ --action-line: var(--raw-lime-ray); --info: var(--raw-blue); --info-pale: var(--raw-blue-pale); --error: var(--raw-red); --error-pale: var(--raw-red-pale); --warning: var(--raw-amber); --warning-pale: var(--raw-amber-pale); --success: var(--raw-green-deep); --success-pale: var(--raw-lime-pale); /* ── SEMANTIC: TYPE ───────────────────────────────────────── */ --font-display: 'Fraunces', 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-2xs: 0.6875rem; /* 11px micro */ --fs-xs: 0.75rem; /* 12px label */ --fs-sm: 0.875rem; /* 14px body-sm */ --fs-md: 1rem; /* 16px body */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); --fs-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); --fw-medium: 500; --fw-bold: 700; --fw-black: 800; --lh: 1.5; --lh-tight: 1.1; /* ── SEMANTIC: SPACE (4px scale) ──────────────────────────── */ --sp-2xs: 0.25rem; /* 4 */ --sp-xs: 0.5rem; /* 8 */ --sp-sm: 0.75rem; /* 12 */ --sp-md: 1rem; /* 16 */ --sp-lg: 1.5rem; /* 24 */ --sp-xl: 2.25rem; /* 36 */ --sp-2xl: 3rem; /* 48 */ /* ── SEMANTIC: SHAPE + STROKE ─────────────────────────────── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; --border: 1px; --border-2: 1.5px; --shadow-sm: 0 1px 2px rgba(13,31,45,.06); --shadow-md: 0 8px 24px rgba(13,31,45,.08); --shadow-lg: 0 18px 48px rgba(13,31,45,.14); --shadow-widget: 0 20px 50px rgba(13,31,45,.35); /* ── SEMANTIC: ICONS ──────────────────────────────────────── */ /* stroke-width is baked into icons.svg (1px, matches Chroma library). Sizes below control the RENDERED size only. */ --icon-xs: 18px; --icon-sm: 22px; --icon-md: 27px; /* browser default (Chroma) */ --icon-lg: 32px; --icon-menu: clamp(24px, 5vw, 27px); --icon-off: var(--faint); /* off state */ --icon-on: var(--action); /* on state */ /* ── SEMANTIC: CHROME ─────────────────────────────────────── */ --appbar-h: 56px; --sidebar-w: 240px; --rail-w: 64px; --bottomnav-h: 62px; --touch: 44px; --widget-w: 320px; --widget-pill: 44px; --qr-frame: 200px; --qr-code: 160px; --brand-mark: 30px; /* ── BREAKPOINTS (as tokens for JS/docs; media queries live in layouts.css) */ --bp-mobile: 0; --bp-tablet: 48em; /* 768px */ --bp-desktop: 64em; /* 1024px */ --bp-wide: 90em; /* 1440px */ } /* ============================================================ PORTAL SWITCH - flip semantic action dials only. Everything else (space/type/radius/shadow) stays identical. ============================================================ */ /* console: staff surfaces (clinic + platform admin) → blue */ body[data-portal="console"] { --action: var(--raw-blue); --action-strong: var(--raw-blue-strong); --action-deep: var(--raw-blue-strong); --action-pale: var(--raw-blue-pale); --action-contrast: var(--raw-white); --action-line: var(--raw-blue-line); --icon-on: var(--action); } /* widget: reception clipboard, floating on desktop → lime (matches wallet) Kept explicit for future divergence. */ body[data-portal="widget"] { --action: var(--raw-lime); --action-strong: var(--raw-lime-strong); --action-deep: var(--raw-lime-deep); --action-pale: var(--raw-lime-pale); --action-contrast: var(--raw-navy); /* navy on lime (D-C10-309, BL-134) */ --action-line: var(--raw-lime-ray); --icon-on: var(--action); --bg: var(--raw-navy); /* widget shell is dark */ --surface: var(--raw-off-white); /* body panels stay light */ --text: var(--raw-navy); } /* wallet: default (no attribute needed). Kept here as override safety. */ body[data-portal="wallet"], body:not([data-portal]) { --action: var(--raw-lime); --action-strong: var(--raw-lime-strong); --action-deep: var(--raw-lime-deep); --action-pale: var(--raw-lime-pale); --action-contrast: var(--raw-navy); /* navy on lime (D-C10-309, BL-134) */ --action-line: var(--raw-lime-ray); }