/* ======================================================================= PanelCoach — Design Tokens Source of truth for colors, type, spacing, motion in BOTH modes. Every other CSS file references these via var(--*) — never raw hex. Layering strategy (dark-manifold-inspired): Light mode → soft drop shadows for elevation Dark mode → hairline borders over the surface for elevation Toggled by html.dark class (existing PANEL_COACH_DARK localStorage). ======================================================================= */ :root { /* ---- Surfaces (light) — slightly cooler, more architectural ---- */ --surface-0: #EEF1F4; /* page background (cooler than old #F0F4F5) */ --surface-1: #FFFFFF; /* card */ --surface-2: #F5F7FA; /* nested surface (bluer than #F9FAFB) */ --surface-sunken: #E8ECF1; /* inputs-in-card (more distinct) */ /* ---- Borders (light) — slightly cooler, still subtle ---- */ --border-subtle: #DEE4EB; --border-strong: #C7CFD9; --border-focus: #A78BFA; /* ---- Text (light) ---- */ --text-primary: #1B2733; /* slightly deeper than NHS #212B32 for modern punch */ --text-secondary: #3B4A5A; --text-muted: #647281; --text-disabled: #9AA6B2; --text-on-accent: #FFFFFF; --text-on-nhs: #FFFFFF; /* ---- Interaction accent (purple) ---- */ --accent: #7C3AED; --accent-hover: #6D28D9; --accent-active: #5B21B6; --accent-subtle-bg: rgba(124, 58, 237, 0.10); --accent-ring: rgba(124, 58, 237, 0.25); /* ---- NHS Blue (brand, full tonal scale) ---- Preserved from the existing palette; elevated to a first-class brand token with a tonal set so it can be used at subtle backgrounds, borders and strong emphasis — not just one hex. */ --nhs-blue: #005EB8; /* canonical NHS blue */ --nhs-blue-50: #EBF3FB; --nhs-blue-100: #D1E4F5; --nhs-blue-200: #A3C9EB; --nhs-blue-400: #3B82C9; --nhs-blue-500: #005EB8; --nhs-blue-600: #004A94; --nhs-blue-700: #003670; --nhs-blue-subtle-bg: rgba(0, 94, 184, 0.10); --nhs-blue-ring: rgba(0, 94, 184, 0.25); /* ---- Status ---- */ --status-success: #34C48B; --status-success-bg: rgba(52, 196, 139, 0.10); --status-warn: #F0884A; --status-warn-bg: rgba(240, 136, 74, 0.10); --status-error: #DC2626; --status-error-bg: rgba(220, 38, 38, 0.08); --status-error-glow: rgba(248, 113, 113, 0.7); /* ---- Category colors (7 — preserved from config.js) ---- */ --cat-leadership: #005EB8; /* NHS blue */ --cat-clinical: #F0884A; --cat-education: #34C48B; --cat-communication: #E85C8A; --cat-values: #78B159; --cat-service: #7B61FF; --cat-career: #8A94A8; /* ---- Framework colors (STAR / CAMP / SPIES / OPEN) ---- */ --fw-star: #E85C8A; --fw-camp: #F0884A; --fw-spies: #34C48B; --fw-open: #8A94A8; /* ---- Question bank tier colors ---- */ --tier-red: #EF4444; --tier-orange: #F97316; --tier-amber: #F59E0B; --tier-sky: #0EA5E9; --tier-blue: #3B82F6; --tier-green: #22C55E; --tier-purple: #A855F7; /* ---- UI tone colors (existing Tailwind-like accent family) ---- These preserve the current Classic palette exactly enough for section cards, technique chips, and review labels, while allowing alternate themes to remap the same UI roles cleanly. */ --ui-tone-red: #F87171; --ui-tone-orange: #FB923C; --ui-tone-amber: #FBBF24; --ui-tone-green: #4ADE80; --ui-tone-blue: #60A5FA; --ui-tone-purple: #C084FC; --ui-tone-teal: #2DD4BF; --ui-tone-indigo: #818CF8; --ui-tone-cyan: #22D3EE; --ui-tone-rose: #FB7185; --ui-tone-gray: #9CA3AF; /* ---- Type scale (rem) ---- CRITICAL: inputs must stay at --size-base (16px) on mobile to prevent iOS Safari's zoom-on-focus. */ --size-xs: 0.75rem; /* 12 — small labels / counters (NOT inputs) */ --size-sm: 0.875rem; /* 14 — secondary body */ --size-base: 1rem; /* 16 — body & ALL form inputs */ --size-lg: 1.125rem; /* 18 — card titles */ --size-xl: 1.25rem; /* 20 — section headings */ --size-2xl: 1.5rem; /* 24 — page title (mobile) */ --size-3xl: 1.875rem; /* 30 — hero */ --size-4xl: 2.25rem; /* 36 — landing */ --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Spacing scale (4px base) ---- */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* ---- Radii ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* cards */ --r-xl: 18px; /* modals, question cards */ --r-2xl: 24px; /* hero cards */ --r-full: 9999px; /* ---- Elevation (light — soft drop shadows) ---- */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); --shadow-xl: 0 24px 60px rgba(16, 24, 40, 0.18); --shadow-focus: 0 0 0 3px var(--accent-ring); --shadow-focus-nhs: 0 0 0 3px var(--nhs-blue-ring); /* ---- Gradients (used only on primary CTA; everything else flat) ---- */ --grad-primary: linear-gradient(135deg, #3B82F6, #60A5FA); --grad-primary-shadow: 0 4px 14px rgba(59, 130, 246, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15); --grad-nhs: linear-gradient(135deg, #005EB8, #3B82C9); --grad-nhs-shadow: 0 4px 14px rgba(0, 94, 184, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15); --btn-primary-bg: var(--grad-primary); --btn-primary-shadow: var(--grad-primary-shadow); --btn-danger-bg: linear-gradient(135deg, #F87171, #FCA5A5); --btn-danger-shadow: 0 4px 14px rgba(248, 113, 113, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); --btn-danger-text: #FFFFFF; /* ---- Motion ---- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* ---- Z-index layers ---- */ --z-tabs: 20; --z-floating-nav: 25; --z-dropdown: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; } /* ======================================================================= Dark mode — the "dark manifold" palette. Layered dark surfaces (deep → card → nested) with hairline borders replacing drop shadows as the primary elevation cue. Text kept muted but AA-contrast; accent lightened for readability on dark. ======================================================================= */ html.dark { /* ---- Surfaces — deeper, cooler, visibly layered ---- */ --surface-0: #070B11; /* page — deeper black with cool tinge */ --surface-1: #111822; /* card — noticeably bluer than old #151B23 */ --surface-2: #18202B; /* nested — clear step above card */ --surface-sunken: #050810; /* deepest, for inset inputs */ /* ---- Borders: visibly brighter hairlines so elevation reads ---- */ --border-subtle: #2A3240; --border-strong: #3D4756; --border-focus: #A78BFA; /* ---- Text: slightly brighter on dark for crisp feel ---- */ --text-primary: #F0F6FC; --text-secondary: #C9D3DF; --text-muted: #8C97A6; --text-disabled: #5D6676; --text-on-accent: #FFFFFF; --text-on-nhs: #FFFFFF; /* ---- Accent: lighter purple on dark (AA ~7:1) ---- */ --accent: #A78BFA; --accent-hover: #C4B5FD; --accent-active: #8B5CF6; --accent-subtle-bg: rgba(167, 139, 250, 0.12); --accent-ring: rgba(167, 139, 250, 0.35); /* ---- NHS Blue on dark ---- Pure #005EB8 is too dim on #0D1117 (≈4.4:1). Lighter tone keeps NHS identity while passing AA contrast for body text at ~7:1. */ --nhs-blue: #4C93D6; --nhs-blue-50: rgba(76, 147, 214, 0.10); --nhs-blue-100: rgba(76, 147, 214, 0.18); --nhs-blue-200: rgba(76, 147, 214, 0.26); --nhs-blue-400: #6FADE0; --nhs-blue-500: #4C93D6; --nhs-blue-600: #005EB8; /* original still usable for strong fills */ --nhs-blue-700: #003670; --nhs-blue-subtle-bg: rgba(76, 147, 214, 0.14); --nhs-blue-ring: rgba(76, 147, 214, 0.35); /* ---- Status (lightened foregrounds) ---- */ --status-success: #4ADE80; --status-success-bg: rgba(74, 222, 128, 0.10); --status-warn: #FBBF24; --status-warn-bg: rgba(251, 191, 36, 0.10); --status-error: #F87171; --status-error-bg: rgba(248, 113, 113, 0.10); --status-error-glow: rgba(248, 113, 113, 0.7); /* ---- Categories (slightly brightened for dark bg) ---- */ --cat-leadership: #4C93D6; /* NHS blue (on-dark variant) */ --cat-clinical: #F0884A; --cat-education: #4ADE80; --cat-communication: #F472B6; --cat-values: #A3D977; --cat-service: #A78BFA; --cat-career: #9CA7B8; /* ---- Frameworks ---- */ --fw-star: #F472B6; --fw-camp: #F0884A; --fw-spies: #4ADE80; --fw-open: #9CA7B8; /* ---- Question bank tier colors ---- */ --tier-red: #F87171; --tier-orange: #FB923C; --tier-amber: #FBBF24; --tier-sky: #38BDF8; --tier-blue: #60A5FA; --tier-green: #4ADE80; --tier-purple: #C084FC; /* ---- UI tone colors ---- */ --ui-tone-red: #F87171; --ui-tone-orange: #FB923C; --ui-tone-amber: #FBBF24; --ui-tone-green: #4ADE80; --ui-tone-blue: #60A5FA; --ui-tone-purple: #C084FC; --ui-tone-teal: #2DD4BF; --ui-tone-indigo: #818CF8; --ui-tone-cyan: #22D3EE; --ui-tone-rose: #FB7185; --ui-tone-gray: #9CA3AF; /* ---- Elevation: hairline border + subtle top-highlight (glass-edge) + soft drop ---- */ --shadow-xs: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px var(--border-subtle); --shadow-sm: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px var(--border-subtle), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px var(--border-subtle), 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-lg: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px var(--border-strong), 0 24px 48px rgba(0, 0, 0, 0.65); --shadow-xl: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px var(--border-strong), 0 36px 80px rgba(0, 0, 0, 0.72); --shadow-focus: 0 0 0 3px var(--accent-ring); --shadow-focus-nhs: 0 0 0 3px var(--nhs-blue-ring); /* ---- Gradients (dark variant for CTA) ---- */ --grad-primary: linear-gradient(135deg, #2563EB, #7B61FF); --grad-primary-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); --grad-nhs: linear-gradient(135deg, #4C93D6, #7B61FF); --grad-nhs-shadow: 0 4px 14px rgba(76, 147, 214, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); --btn-primary-bg: var(--grad-primary); --btn-primary-shadow: var(--grad-primary-shadow); --btn-danger-bg: linear-gradient(135deg, #EF4444, #F87171); --btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08); --btn-danger-text: #FFFFFF; } /* Respect OS-level motion preferences */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }