/* ============================================================ PracticeVue — Design Tokens ============================================================ Single source of truth for color, type, space, radius, and shadow. Component CSS must reference semantic tokens only (e.g. --bg-surface, --text-primary). Never hardcode primitives in component CSS — change the token, change the system. Token tiers: 1. Primitives — raw scale values, theme-agnostic 2. Semantic — purpose-named, theme-aware (overridden in [data-theme="dark"]) 3. Component — defined in components.css using semantic tokens Themes: :root → light (default) [data-theme="dark"] → dark ============================================================ */ /* ============================================================ 1. PRIMITIVES (theme-agnostic) ============================================================ */ :root { /* --- Neutral scale (warm-cool gray) --- */ --gray-0: #FFFFFF; --gray-25: #FAFBFC; --gray-50: #F7F8FA; --gray-75: #F1F3F6; --gray-100: #EAECEF; --gray-150: #DEE2E7; --gray-200: #C7CCD4; --gray-300: #A4ADB7; --gray-400: #7B848F; --gray-500: #5C6470; --gray-600: #424A55; --gray-700: #2D343C; --gray-800: #1B1F24; --gray-900: #131518; --gray-950: #0B0D0F; /* --- Accent: deep teal (Tailwind-aligned scale, used more prominently in tabs, sidebar active, and chart primary) --- */ --teal-50: #F0FDFA; --teal-100: #CCFBF1; --teal-200: #99F6E4; --teal-300: #5EEAD4; --teal-400: #2DD4BF; --teal-500: #14B8A6; --teal-600: #0D9488; --teal-700: #0F766E; --teal-800: #115E59; /* --- Data semantics --- */ --green-50: #E3F4EC; --green-100: #C2E7D3; --green-300: #5DC796; --green-500: #0E9F6E; --green-600: #0B8059; --green-700: #08653F; --red-50: #FBEAEA; --red-100: #F5C8C8; --red-300: #ED7A7A; --red-500: #DC2626; --red-600: #B91C1C; --red-700: #991B1B; --amber-50: #FBF1DD; --amber-100: #F6E0B0; --amber-300: #E9B257; --amber-500: #B45309; --amber-600: #92400E; --amber-700: #78350F; --blue-50: #E3EDFC; --blue-100: #BFD4F8; --blue-300: #6FA3F0; --blue-500: #1E6FE8; --blue-600: #1857BD; --blue-700: #134393; /* --- Spacing scale (4px base) --- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Radius scale --- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-full: 9999px; /* --- Type families --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* --- Type scale --- */ --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 15px; --text-xl: 16px; --text-2xl: 18px; --text-3xl: 20px; --text-4xl: 24px; --text-5xl: 28px; --text-6xl: 32px; --text-7xl: 40px; /* --- Type weights --- */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* --- Line heights --- */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; /* --- Letter spacing --- */ --tracking-tight: -0.012em; --tracking-tighter: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.08em; /* --- Z-index --- */ --z-base: 0; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-popover: 1200; --z-toast: 1500; /* --- Motion --- */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.2, 0.8, 0.4, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* --- Layout --- */ --sidebar-width: 240px; --topbar-height: 52px; --container-max: 1440px; } /* ============================================================ 2. SEMANTIC TOKENS — LIGHT (default) ============================================================ */ :root { /* --- Surfaces --- */ --bg-canvas: var(--gray-50); /* page background */ --bg-surface: var(--gray-0); /* cards, primary surface */ --bg-subtle: var(--gray-75); /* hover, secondary fills */ --bg-muted: var(--gray-100); /* tertiary, input chrome */ --bg-inverse: var(--gray-950); /* inverted surface (e.g. tooltips) */ --bg-overlay: rgba(11, 13, 15, 0.45); /* --- Sidebar (slightly distinct from main surfaces) --- */ --sidebar-bg: var(--gray-0); --sidebar-border: var(--gray-100); --sidebar-item-fg: var(--gray-600); --sidebar-item-hover-bg: var(--gray-75); --sidebar-item-active-bg: var(--gray-75); --sidebar-item-active-fg: var(--gray-950); /* --- Borders --- */ --border-subtle: var(--gray-75); /* hairlines inside cards */ --border-default: var(--gray-100); /* card borders, table rows */ --border-strong: var(--gray-200); /* emphasized borders, focus */ --border-inverse: var(--gray-700); /* --- Text --- */ --text-primary: var(--gray-950); /* headings, primary body */ --text-secondary: var(--gray-600); /* secondary copy */ --text-tertiary: var(--gray-500); /* meta, captions */ --text-disabled: var(--gray-300); --text-inverse: var(--gray-0); --text-link: var(--teal-600); --text-link-hover: var(--teal-700); /* --- Brand accent (more prominent: tabs, sidebar active, chart primary) --- */ --accent: var(--teal-600); --accent-hover: var(--teal-700); --accent-subtle-bg: var(--teal-50); --accent-subtle-fg: var(--teal-700); --accent-border: var(--teal-200); /* --- Action: Primary (dark gray — gray-800 light, near-white inverted in dark) --- */ --action-primary-bg: var(--gray-800); --action-primary-bg-hover: var(--gray-700); --action-primary-bg-active: var(--gray-700); --action-primary-fg: var(--gray-0); /* --- Action: Secondary (outlined) --- */ --action-secondary-bg: var(--gray-0); --action-secondary-bg-hover: var(--gray-75); --action-secondary-border: var(--gray-150); --action-secondary-fg: var(--gray-900); /* --- Action: Ghost (no border) --- */ --action-ghost-bg-hover: var(--gray-75); --action-ghost-fg: var(--gray-700); /* --- Semantic: positive --- */ --positive-fg: var(--green-600); --positive-bg-subtle: var(--green-50); --positive-border: var(--green-100); /* --- Semantic: negative --- */ --negative-fg: var(--red-600); --negative-bg-subtle: var(--red-50); --negative-border: var(--red-100); /* --- Semantic: warning --- */ --warning-fg: var(--amber-500); --warning-bg-subtle: var(--amber-50); --warning-border: var(--amber-100); /* --- Semantic: info --- */ --info-fg: var(--blue-500); --info-bg-subtle: var(--blue-50); --info-border: var(--blue-100); /* --- Toast filled backgrounds (saturated fill style) --- */ --toast-fg: #FFFFFF; /* text on colored filled toasts */ --toast-positive-fill: var(--green-600); /* #0B8059, ~5.2:1 on white */ --toast-negative-fill: var(--red-600); /* #B91C1C, ~5.4:1 on white */ --toast-warning-fill: var(--amber-600); /* #92400E, ~5.6:1 on white */ --toast-info-fill: var(--blue-600); /* #1857BD, ~5.0:1 on white */ --toast-neutral-fill: var(--gray-950); /* near-black in light mode */ --toast-neutral-fg: #FFFFFF; /* white text on near-black */ /* --- Chart palette --- */ --chart-primary: var(--accent); /* brand teal for hero data series */ --chart-secondary: var(--gray-200); /* comparison / forecast series */ --chart-positive: var(--green-500); --chart-negative: var(--red-500); --chart-warning: var(--amber-500); --chart-accent: var(--teal-500); --chart-grid: var(--gray-100); --chart-axis: var(--gray-400); /* Categorical (e.g. payer mix, service lines) — calm, distinct */ --cat-1: var(--gray-900); --cat-2: var(--teal-500); --cat-3: #6366F1; /* muted indigo */ --cat-4: var(--amber-500); --cat-5: var(--gray-400); --cat-6: #B45309; /* Sparkline trajectory (orange → green, Galiant pattern) */ --spark-start: var(--amber-500); --spark-end: var(--green-500); /* --- Sign-in hero (on-photo overlay, PV-30 / PV-146) --- Bespoke colors that sit over the mountains photo + teal wash on the split sign-in. Kept here (not primitives-in-components) so components.css carries zero raw hex/rgba for the hero. The overlay reads light in both themes (the photo is constant); the dark variant only deepens the wash + card scrim. */ --overlay-scrim: linear-gradient(color-mix(in srgb, var(--teal-600) 42%, transparent), color-mix(in srgb, var(--teal-600) 42%, transparent)), linear-gradient(180deg, rgba(11, 13, 15, .10), rgba(11, 13, 15, .04) 32%, rgba(11, 13, 15, .40)); --hero-line: #ECFDF8; /* actuals/forecast stroke */ --hero-area: rgba(255, 255, 255, .06); /* filled area under the line */ --hero-dot-fill: #FFFFFF; /* "Today" marker dot fill */ --hero-dot-stroke: var(--teal-600); /* marker ring */ --hero-marker: rgba(255, 255, 255, .5); /* dashed "Today" rule */ --hero-text: #FFFFFF; /* primary on-photo text */ --hero-text-muted: rgba(255, 255, 255, .78); /* card kicker / sub / legend */ --hero-text-faint: rgba(255, 255, 255, .5); /* month axis labels */ --hero-delta: #6EE7B7; /* positive delta (green on photo) */ /* Card is DARK glass in both themes: it floats over the photo's brightest region (top-right sky), so a light fill would wash out the white value + delta. Dark translucent keeps the callout legible on any photo region. */ --hero-card-bg: rgba(11, 13, 15, .32); /* frosted callout fill (dark glass) */ --hero-card-border: rgba(255, 255, 255, .22); /* frosted callout hairline */ /* --- Shadows (used sparingly — popovers, modals only) --- */ --shadow-xs: 0 1px 2px rgba(11, 13, 15, 0.04); --shadow-sm: 0 1px 3px rgba(11, 13, 15, 0.05), 0 1px 2px rgba(11, 13, 15, 0.03); --shadow-md: 0 4px 12px rgba(11, 13, 15, 0.06), 0 2px 4px rgba(11, 13, 15, 0.04); --shadow-lg: 0 12px 24px rgba(11, 13, 15, 0.08), 0 4px 8px rgba(11, 13, 15, 0.04); --shadow-xl: 0 24px 48px rgba(11, 13, 15, 0.12), 0 8px 16px rgba(11, 13, 15, 0.06); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(14, 124, 123, 0.18); /* --- Tag palette (PV-90, also reused by PV-99 location colors) --- 8 mutually-distinct hues, paired -bg / -fg / -border tokens. `tag.color` in the DB stores one of: slate, teal, amber, rose, violet, emerald, sky, stone. Component CSS reads these tokens via the .chip[data-tag-color="..."] selector, never the raw hex. */ --tag-slate-bg: #EAECEF; /* gray-100 */ --tag-slate-fg: #2D343C; /* gray-700 */ --tag-slate-border: #C7CCD4; /* gray-200 */ --tag-teal-bg: #CCFBF1; --tag-teal-fg: #115E59; --tag-teal-border: #99F6E4; --tag-amber-bg: #FBF1DD; --tag-amber-fg: #78350F; --tag-amber-border: #F6E0B0; --tag-rose-bg: #FFE4E6; --tag-rose-fg: #9F1239; --tag-rose-border: #FECDD3; --tag-violet-bg: #EDE9FE; --tag-violet-fg: #5B21B6; --tag-violet-border: #DDD6FE; --tag-emerald-bg: #D1FAE5; --tag-emerald-fg: #065F46; --tag-emerald-border: #A7F3D0; --tag-sky-bg: #E0F2FE; --tag-sky-fg: #075985; --tag-sky-border: #BAE6FD; --tag-stone-bg: #EDE6DE; --tag-stone-fg: #44403C; --tag-stone-border: #D6CCC0; } /* ============================================================ 3. SEMANTIC TOKENS — DARK ============================================================ */ [data-theme="dark"] { /* --- Surfaces (layered dark, Linear-style) --- */ --bg-canvas: var(--gray-950); --bg-surface: var(--gray-900); --bg-subtle: var(--gray-800); --bg-muted: var(--gray-700); --bg-inverse: var(--gray-50); --bg-overlay: rgba(0, 0, 0, 0.65); /* --- Sidebar --- */ --sidebar-bg: var(--gray-950); --sidebar-border: var(--gray-800); --sidebar-item-fg: var(--gray-300); --sidebar-item-hover-bg: var(--gray-800); --sidebar-item-active-bg: var(--gray-800); --sidebar-item-active-fg: var(--gray-0); /* --- Borders --- */ --border-subtle: var(--gray-800); --border-default: var(--gray-700); --border-strong: var(--gray-600); --border-inverse: var(--gray-200); /* --- Text --- */ --text-primary: #ECEEF0; --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --text-disabled: var(--gray-500); --text-inverse: var(--gray-950); --text-link: var(--teal-300); --text-link-hover: var(--teal-200); /* --- Brand accent (dark mode: lighter teal for contrast) --- */ --accent: var(--teal-400); --accent-hover: var(--teal-300); --accent-subtle-bg: rgba(20, 184, 166, 0.14); --accent-subtle-fg: var(--teal-200); --accent-border: rgba(20, 184, 166, 0.4); /* --- Action: Primary (inverted to light — Linear pattern) --- */ --action-primary-bg: #ECEEF0; --action-primary-bg-hover: var(--gray-0); --action-primary-bg-active: var(--gray-150); --action-primary-fg: var(--gray-950); /* --- Action: Secondary --- */ --action-secondary-bg: var(--gray-900); --action-secondary-bg-hover: var(--gray-800); --action-secondary-border: var(--gray-700); --action-secondary-fg: #ECEEF0; /* --- Action: Ghost --- */ --action-ghost-bg-hover: var(--gray-800); --action-ghost-fg: var(--gray-300); /* --- Semantic: positive --- */ --positive-fg: #34D399; --positive-bg-subtle: rgba(16, 185, 129, 0.12); --positive-border: rgba(16, 185, 129, 0.25); /* --- Semantic: negative --- */ --negative-fg: #F87171; --negative-bg-subtle: rgba(220, 38, 38, 0.14); --negative-border: rgba(220, 38, 38, 0.28); /* --- Semantic: warning --- */ --warning-fg: #FBBF24; --warning-bg-subtle: rgba(245, 158, 11, 0.14); --warning-border: rgba(245, 158, 11, 0.28); /* --- Semantic: info --- */ --info-fg: #60A5FA; --info-bg-subtle: rgba(59, 130, 246, 0.14); --info-border: rgba(59, 130, 246, 0.28); /* --- Toast filled backgrounds (saturated fill style, dark theme) --- */ --toast-fg: #FFFFFF; /* white on colored dark-mode fills */ --toast-positive-fill: var(--green-700); /* #08653F, darker for contrast */ --toast-negative-fill: var(--red-700); /* #991B1B, darker for contrast */ --toast-warning-fill: var(--amber-600); /* #92400E, sufficient on dark */ --toast-info-fill: var(--blue-700); /* #134393, darker for contrast */ --toast-neutral-fill: var(--gray-800); /* dark surface in dark mode */ --toast-neutral-fg: var(--gray-100); /* near-white text on dark surface */ /* --- Chart palette --- */ --chart-primary: var(--accent); /* brand teal in dark mode too */ --chart-secondary: var(--gray-700); --chart-positive: #34D399; --chart-negative: #F87171; --chart-warning: #FBBF24; --chart-accent: var(--teal-300); --chart-grid: var(--gray-800); --chart-axis: var(--gray-500); --cat-1: #ECEEF0; --cat-2: var(--teal-300); --cat-3: #818CF8; --cat-4: #FBBF24; --cat-5: var(--gray-400); --cat-6: #F59E0B; --spark-start: #FBBF24; --spark-end: #34D399; /* --- Sign-in hero (on-photo overlay, dark) --- Same overlay, deeper wash + card scrim; line/dot pick up the teal accents. */ --overlay-scrim: linear-gradient(color-mix(in srgb, var(--teal-600) 30%, transparent), color-mix(in srgb, var(--teal-600) 30%, transparent)), linear-gradient(180deg, rgba(11, 13, 15, .42), rgba(11, 13, 15, .34) 30%, rgba(11, 13, 15, .66)); --hero-line: #5EEAD4; /* = --teal-300 */ --hero-area: rgba(45, 212, 191, .08); /* = --teal-400 @ 8% */ --hero-dot-fill: #0B0D0F; /* near-black */ --hero-dot-stroke: #5EEAD4; --hero-marker: rgba(255, 255, 255, .45); --hero-text: #ECEEF0; --hero-text-muted: rgba(236, 238, 240, .75); --hero-text-faint: rgba(236, 238, 240, .45); --hero-delta: #6EE7B7; --hero-card-bg: rgba(11, 13, 15, .30); --hero-card-border: rgba(255, 255, 255, .16); /* --- Shadows (stronger in dark mode) --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35); --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.25); /* --- Tag palette (dark theme) --- Backgrounds drop to translucent fills so chips read as gentle accents against the dark surface rather than bright billboards. Foreground text lifts to the lighter end of each hue for AA contrast on the translucent fill. */ --tag-slate-bg: rgba(167, 173, 183, 0.18); --tag-slate-fg: #C7CCD4; --tag-slate-border: rgba(167, 173, 183, 0.32); --tag-teal-bg: rgba(45, 212, 191, 0.18); --tag-teal-fg: #5EEAD4; --tag-teal-border: rgba(45, 212, 191, 0.35); --tag-amber-bg: rgba(245, 158, 11, 0.18); --tag-amber-fg: #FBBF24; --tag-amber-border: rgba(245, 158, 11, 0.35); --tag-rose-bg: rgba(244, 63, 94, 0.18); --tag-rose-fg: #FDA4AF; --tag-rose-border: rgba(244, 63, 94, 0.35); --tag-violet-bg: rgba(139, 92, 246, 0.20); --tag-violet-fg: #C4B5FD; --tag-violet-border: rgba(139, 92, 246, 0.38); --tag-emerald-bg: rgba(16, 185, 129, 0.18); --tag-emerald-fg: #6EE7B7; --tag-emerald-border: rgba(16, 185, 129, 0.35); --tag-sky-bg: rgba(56, 189, 248, 0.18); --tag-sky-fg: #7DD3FC; --tag-sky-border: rgba(56, 189, 248, 0.35); --tag-stone-bg: rgba(168, 162, 158, 0.18); --tag-stone-fg: #D6D3D1; --tag-stone-border: rgba(168, 162, 158, 0.35); color-scheme: dark; }