/* ============================================================ V-Prosata · Design Tokens -------------------------------------------------- CSS variables for colors, typography, spacing, radii, etc. Light theme is default. Dark theme activates on or @media (prefers-color-scheme: dark). ============================================================ */ :root { /* ─── Surfaces ─── */ --vp-bg: #F6F5F2; --vp-surface: #FFFFFF; --vp-surface-2: #FAF9F6; --vp-surface-3: #F2F0EA; /* ─── Borders ─── */ --vp-border: #E8E5DE; --vp-border-strong: #D7D3C9; --vp-border-subtle: #F0EDE6; /* ─── Text ─── */ --vp-text: #1A1714; --vp-text-2: #5E5A53; --vp-text-3: #928D84; --vp-text-inverse: #FFFFFF; /* ─── Accent (indigo) ─── */ --vp-accent: #4F46E5; --vp-accent-hover: #4338CA; --vp-accent-soft: #EEF0FF; --vp-accent-text: #3730A3; /* ─── Status ─── */ --vp-success: #0E8C5D; --vp-success-soft: #E5F3EC; --vp-success-text: #0A6E48; --vp-warning: #B45309; --vp-warning-soft: #FBF1DF; --vp-warning-text: #854D0E; --vp-danger: #C03434; --vp-danger-soft: #FBE9E9; --vp-danger-text: #9B1C1C; --vp-info: #0369A1; --vp-info-soft: #E0F2FE; --vp-info-text: #075985; /* ─── Typography ─── */ --vp-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --vp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ─── Radii ─── */ --vp-radius-sm: 6px; --vp-radius-md: 8px; --vp-radius-lg: 10px; --vp-radius-xl: 14px; --vp-radius-pill: 999px; /* ─── Shadows ─── */ --vp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --vp-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); --vp-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06); --vp-shadow-accent: 0 1px 2px rgba(79, 70, 229, 0.20); --vp-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); /* ─── Layout ─── */ --vp-sidebar-w: 264px; } /* Dark theme — opt-in via attribute on */ [data-theme="dark"] { --vp-bg: #0D0E12; --vp-surface: #16181D; --vp-surface-2: #1B1E24; --vp-surface-3: #222630; --vp-border: #272B34; --vp-border-strong: #383D48; --vp-border-subtle: #1F232B; --vp-text: #ECEDEE; --vp-text-2: #9CA0A8; --vp-text-3: #6A6E78; --vp-text-inverse: #0D0E12; --vp-accent: #818CF8; --vp-accent-hover: #A5B0FF; --vp-accent-soft: rgba(129, 140, 248, 0.14); --vp-accent-text: #C7CCFF; --vp-success: #34D399; --vp-success-soft: rgba(52, 211, 153, 0.12); --vp-success-text: #A7F3D0; --vp-warning: #FBBF24; --vp-warning-soft: rgba(251, 191, 36, 0.12); --vp-warning-text: #FDE68A; --vp-danger: #F87171; --vp-danger-soft: rgba(248, 113, 113, 0.12); --vp-danger-text: #FCA5A5; --vp-info: #38BDF8; --vp-info-soft: rgba(56, 189, 248, 0.12); --vp-info-text: #BAE6FD; } /* Honor system preference if user hasn't opted in/out */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vp-bg: #0D0E12; --vp-surface: #16181D; --vp-surface-2: #1B1E24; --vp-surface-3: #222630; --vp-border: #272B34; --vp-border-strong: #383D48; --vp-border-subtle: #1F232B; --vp-text: #ECEDEE; --vp-text-2: #9CA0A8; --vp-text-3: #6A6E78; --vp-accent: #818CF8; --vp-accent-soft: rgba(129, 140, 248, 0.14); --vp-accent-text: #C7CCFF; --vp-success: #34D399; --vp-success-soft: rgba(52, 211, 153, 0.12); --vp-success-text: #A7F3D0; --vp-warning: #FBBF24; --vp-warning-soft: rgba(251, 191, 36, 0.12); --vp-warning-text: #FDE68A; --vp-danger: #F87171; --vp-danger-soft: rgba(248, 113, 113, 0.12); --vp-danger-text: #FCA5A5; --vp-info: #38BDF8; --vp-info-soft: rgba(56, 189, 248, 0.12); --vp-info-text: #BAE6FD; } }