/** * CompoundWiki design tokens. * Lives in the plugin so the visual language is theme-independent and the * Elementor widgets always have their design system. Light is the default; * [data-theme="dark"] on flips it. * * Bold editorial: charcoal ink for solid fills + a vivid lime accent, warm * neutrals, crisp borders, mostly flat with restrained gradients. Mobile-first. */ :root { color-scheme: light; /* Typography */ --cw-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --cw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --cw-text-xs: 0.75rem; --cw-text-sm: 0.875rem; --cw-text-base: 1rem; --cw-text-lg: 1.125rem; --cw-text-xl: 1.375rem; --cw-text-2xl: 1.75rem; --cw-text-3xl: 2.25rem; --cw-text-4xl: 3rem; --cw-leading: 1.6; --cw-tracking-tight: -0.02em; /* Brand — deep navy-blue ink (solid fills) + clinical sky-blue (accent) */ --cw-ink: #0f172a; --cw-ink-2: #0b1220; --cw-lime: #0ea5e9; /* var name kept for compat; now sky-500 */ --cw-lime-bright: #38bdf8; /* sky-400 */ --cw-brand: #0369a1; /* sky-700: readable accent on white (links, active, hover) — 5.9:1 */ --cw-brand-strong: #075985; /* sky-800 */ --cw-brand-soft: #e0f2fe; /* sky-100 */ --cw-accent: #0ea5e9; --cw-accent-2: #075985; /* Neutrals / surfaces (light) — clean, faintly cool clinical */ --cw-bg: #f4f8fb; --cw-bg-subtle: #e7eff6; --cw-surface: #ffffff; --cw-surface-2: #f4f8fb; --cw-text: #0f172a; --cw-text-muted: #475569; /* slate-600 ~7.4:1 on white — AA+ for secondary text */ --cw-text-subtle: #64748b; /* slate-500 ~4.7:1 on white — passes AA for meta/eyebrows */ --cw-border: #dbe6ef; --cw-border-strong: #c2d4e2; /* Status / evidence levels */ --cw-ok: #10b981; --cw-ok-soft: #ecfdf5; --cw-warn: #f59e0b; --cw-warn-soft: #fffbeb; --cw-danger: #ef4444; --cw-ev-limited: #64748b; --cw-ev-limited-soft: #f1f5f9; --cw-ev-emerging: #d97706; --cw-ev-emerging-soft: #fffbeb; --cw-ev-well: #0891b2; --cw-ev-well-soft: #ecfeff; --cw-ev-extensive: #0369a1; --cw-ev-extensive-soft: #e0f2fe; --cw-ev-fda: #15803d; /* regulatory approval — status green, distinct from the blue tiers */ --cw-ev-fda-soft: #dcfce7; /* Gradients — deep navy-blue primary, sky-blue pop */ --cw-gradient-brand: linear-gradient(150deg, #0c4a6e 0%, #082f49 100%); --cw-gradient-lime: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); --cw-gradient-brand-soft: linear-gradient(135deg, rgba(14, 165, 233, 0.16) 0%, rgba(3, 105, 161, 0.08) 100%); --cw-gradient-hero: radial-gradient(1200px 600px at 50% -10%, rgba(14, 165, 233, 0.14), transparent 60%); --cw-gradient-text: linear-gradient(115deg, #0f172a 0%, #0c4a6e 50%, #0369a1 100%); /* Radii */ --cw-radius-sm: 8px; --cw-radius-md: 12px; --cw-radius-lg: 16px; --cw-radius-xl: 24px; --cw-radius-full: 999px; /* Spacing scale */ --cw-space-1: 0.25rem; --cw-space-2: 0.5rem; --cw-space-3: 0.75rem; --cw-space-4: 1rem; --cw-space-5: 1.5rem; --cw-space-6: 2rem; --cw-space-7: 3rem; --cw-space-8: 4rem; /* Soft layered shadows */ --cw-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --cw-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 8px 24px -4px rgba(15, 23, 42, 0.08); --cw-shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 24px 48px -12px rgba(20, 24, 15, 0.10); --cw-shadow-brand: 0 8px 22px -8px rgba(8, 47, 73, 0.45); --cw-shadow-lime: 0 8px 24px -6px rgba(14, 165, 233, 0.45); /* Layout */ --cw-container: 1200px; --cw-container-narrow: 820px; /* Motion */ --cw-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --cw-ring: 0 0 0 3px rgba(14, 165, 233, 0.40); /* Buttons — light: dark-ink primary on white; ghost = white w/ visible outline */ --cw-btn-primary-bg: var(--cw-gradient-brand); --cw-btn-primary-fg: #ffffff; --cw-btn-primary-shadow: var(--cw-shadow-brand); --cw-btn-ghost-bg: var(--cw-surface); --cw-btn-ghost-fg: var(--cw-text); --cw-btn-ghost-border: var(--cw-border-strong); } [data-theme="dark"] { color-scheme: dark; --cw-ink: #e8f1f8; --cw-ink-2: #0b1220; --cw-lime: #38bdf8; --cw-lime-bright: #7dd3fc; --cw-brand: #38bdf8; --cw-brand-strong: #7dd3fc; --cw-brand-soft: #0c2740; --cw-accent: #38bdf8; --cw-accent-2: #0ea5e9; --cw-bg: #0a1220; --cw-bg-subtle: #0f1a2b; --cw-surface: #111d30; --cw-surface-2: #16273c; --cw-text: #e8f1f8; --cw-text-muted: #94a7bd; --cw-text-subtle: #64748b; --cw-border: #1e3048; --cw-border-strong: #2b415d; --cw-ok-soft: rgba(16, 185, 129, 0.12); --cw-warn-soft: rgba(245, 158, 11, 0.12); --cw-ev-limited-soft: rgba(100, 116, 139, 0.18); --cw-ev-emerging-soft: rgba(217, 119, 6, 0.16); --cw-ev-well-soft: rgba(8, 145, 178, 0.16); --cw-ev-extensive: #38bdf8; --cw-ev-extensive-soft: rgba(14, 165, 233, 0.16); --cw-ev-fda: #4ade80; --cw-ev-fda-soft: rgba(34, 197, 94, 0.16); --cw-gradient-brand: linear-gradient(150deg, #123049 0%, #0a1220 100%); --cw-gradient-brand-soft: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(14, 165, 233, 0.10) 100%); --cw-gradient-hero: radial-gradient(1200px 600px at 50% -10%, rgba(56, 189, 248, 0.14), transparent 60%); --cw-gradient-text: linear-gradient(115deg, #e8f1f8 0%, #38bdf8 100%); --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --cw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 8px 24px -4px rgba(0, 0, 0, 0.5); --cw-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 24px 48px -12px rgba(0, 0, 0, 0.55); --cw-shadow-brand: 0 8px 22px -8px rgba(56, 189, 248, 0.35); /* Buttons — dark: bright sky primary on deep-navy ink text so it reads as clickable */ --cw-btn-primary-bg: var(--cw-gradient-lime); --cw-btn-primary-fg: #0b1220; --cw-btn-primary-shadow: 0 8px 24px -6px rgba(14, 165, 233, 0.45); --cw-btn-ghost-bg: #16273c; --cw-btn-ghost-fg: #e8f1f8; --cw-btn-ghost-border: #2b415d; } @media (prefers-reduced-motion: reduce) { :root { --cw-transition: 0ms; } }