@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');
/* ====================================================================== *
* SlopKit UI — base stylesheet
*
* Link this FIRST in your , synchronously, to prevent FOUC:
*
*
*
* Because a stylesheet is render-blocking, the design tokens below
* are available on the very first paint (correct background / text / fonts),
* and tiered `:not(:defined)` rules keep content readable while hiding
* interactive components until their custom-element definitions upgrade.
*
* The token values here are the single source of truth and mirror the
* runtime injection in core/vk-theme.js (which is skipped when this file
* is present, via the --vk-css sentinel below).
* ====================================================================== */
:root {
/* Sentinel so vk-theme.js can detect this stylesheet and skip re-injecting */
--vk-css: 1;
color-scheme: light;
/* Neutral scale — cool, slightly blue-tinted slate */
--vk-neutral-0: #ffffff;
--vk-neutral-50: #f8fafc;
--vk-neutral-100: #f1f4f9;
--vk-neutral-150: #e9edf3;
--vk-neutral-200: #e2e8f0;
--vk-neutral-300: #cdd5e0;
--vk-neutral-400: #97a3b6;
--vk-neutral-500: #64748b;
--vk-neutral-600: #475569;
--vk-neutral-700: #334155;
--vk-neutral-800: #1d2738;
--vk-neutral-900: #111827;
--vk-neutral-950: #0a0f1a;
/* Brand — refined indigo */
--vk-color-primary: #5b5bd6;
--vk-color-primary-hover: #5151c9;
--vk-color-primary-active: #4646b8;
--vk-color-primary-light: #ecedfb;
--vk-color-primary-subtle: #f5f5fd;
--vk-color-on-primary: #ffffff;
--vk-color-accent: #8b5cf6;
/* Brand gradients — primary → accent for visible multi-color presets */
--vk-gradient-brand-end: var(--vk-color-accent);
--vk-gradient-display: linear-gradient(120deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-gradient-display-vertical: linear-gradient(180deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-gradient-display-diagonal: linear-gradient(135deg, var(--vk-color-primary), var(--vk-color-accent));
/* Theme behavior flags (apply to both light & dark; 1 = on, 0 = off) */
--vk-theme-atmosphere: 1; /* ambient brand glow behind the page */
--vk-theme-grid: 1; /* subtle grid texture overlay */
--vk-theme-glass: 1; /* translucent blurred chrome (navbars/headers) */
/* Semantic surfaces & text */
--vk-color-surface: var(--vk-neutral-0);
--vk-color-surface-alt: var(--vk-neutral-50);
--vk-color-surface-sunken: var(--vk-neutral-100);
--vk-color-surface-hover: var(--vk-neutral-100);
--vk-color-text: var(--vk-neutral-900);
--vk-color-text-secondary: var(--vk-neutral-600);
--vk-color-text-muted: var(--vk-neutral-400);
--vk-color-border: var(--vk-neutral-200);
--vk-color-border-strong: var(--vk-neutral-300);
/* Status colors */
--vk-color-success: #16a34a;
--vk-color-success-light: #dcfce7;
--vk-color-success-text: #14803a;
--vk-color-warning: #d97706;
--vk-color-warning-light: #fef0c7;
--vk-color-warning-text: #b45309;
--vk-color-danger: #e5484d;
--vk-color-danger-hover: #d63a3f;
--vk-color-danger-light: #ffe5e7;
--vk-color-danger-text: #c62a2f;
--vk-color-info: #0a8acb;
--vk-color-info-light: #d6f0fd;
--vk-color-info-text: #0773aa;
/* Focus ring + overlays */
--vk-ring: color-mix(in srgb, var(--vk-color-primary) 38%, transparent);
--vk-ring-width: 3px;
--vk-color-overlay: rgba(15, 23, 42, 0.45);
/* Typography */
--vk-font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--vk-font-display: 'Bricolage Grotesque', var(--vk-font-family);
--vk-font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
--vk-font-size-xs: 0.75rem;
--vk-font-size-sm: 0.8125rem;
--vk-font-size-base: 0.9375rem;
--vk-font-size-lg: 1.0625rem;
--vk-font-size-xl: 1.25rem;
--vk-font-size-2xl: 1.5rem;
--vk-font-size-3xl: 1.875rem;
--vk-font-size-4xl: 2.5rem;
--vk-font-weight-normal: 400;
--vk-font-weight-medium: 500;
--vk-font-weight-semibold: 600;
--vk-font-weight-bold: 700;
--vk-line-height: 1.6;
--vk-line-height-tight: 1.2;
--vk-tracking-tight: -0.02em;
--vk-tracking-snug: -0.011em;
--vk-tracking-normal: 0;
--vk-tracking-wide: 0.02em;
/* Spacing */
--vk-spacing-2xs: 0.125rem;
--vk-spacing-xs: 0.25rem;
--vk-spacing-sm: 0.5rem;
--vk-spacing-md: 1rem;
--vk-spacing-lg: 1.5rem;
--vk-spacing-xl: 2rem;
--vk-spacing-2xl: 3rem;
--vk-spacing-3xl: 4rem;
/* Radius — corner style overrides these wholesale via theme config */
--vk-radius-xs: 0.25rem;
--vk-radius-sm: 0.375rem;
--vk-radius-md: 0.5rem;
--vk-radius-lg: 0.75rem;
--vk-radius-xl: 1rem;
--vk-radius-2xl: 1.25rem;
--vk-radius-full: 9999px;
/* Elevation */
--vk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
--vk-shadow-sm:
0 1px 2px rgba(15, 23, 42, 0.06),
0 1px 3px rgba(15, 23, 42, 0.08);
--vk-shadow-md:
0 2px 4px -1px rgba(15, 23, 42, 0.06),
0 4px 12px -2px rgba(15, 23, 42, 0.10);
--vk-shadow-lg:
0 4px 8px -2px rgba(15, 23, 42, 0.08),
0 12px 28px -6px rgba(15, 23, 42, 0.14);
--vk-shadow-xl:
0 8px 16px -4px rgba(15, 23, 42, 0.10),
0 24px 48px -12px rgba(15, 23, 42, 0.22);
--vk-shadow-focus: 0 0 0 var(--vk-ring-width) var(--vk-ring);
--vk-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06);
/* Motion */
--vk-ease: cubic-bezier(0.4, 0, 0.2, 1);
--vk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--vk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--vk-transition-fast: 130ms var(--vk-ease);
--vk-transition-base: 220ms var(--vk-ease);
--vk-transition-slow: 360ms var(--vk-ease-out);
--vk-duration-fast: 130ms;
--vk-duration-base: 220ms;
--vk-duration-slow: 360ms;
/* Layout */
--vk-breakpoint-xs: 480px;
--vk-breakpoint-sm: 640px;
--vk-breakpoint-md: 768px;
--vk-breakpoint-lg: 1024px;
--vk-breakpoint-xl: 1280px;
--vk-breakpoint-sidebar: 880px;
--vk-container-max-sm: var(--vk-breakpoint-sm);
--vk-container-max-md: var(--vk-breakpoint-md);
--vk-container-max-lg: var(--vk-breakpoint-lg);
--vk-container-max-xl: var(--vk-breakpoint-xl);
}
/* ---------------------------------------------------------------------- *
* Dark theme — explicit opt-in (setTheme('dark') -> [data-vk-theme])
* ---------------------------------------------------------------------- */
[data-vk-theme="dark"] {
color-scheme: dark;
--vk-color-primary: #7b7bf0;
--vk-color-primary-hover: #8c8cf4;
--vk-color-primary-active: #9d9df7;
--vk-color-primary-light: #24244a;
--vk-color-primary-subtle: #1a1a33;
--vk-color-on-primary: #ffffff;
--vk-color-accent: #a78bfa;
--vk-gradient-brand-end: var(--vk-color-accent);
--vk-gradient-display: linear-gradient(120deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-gradient-display-vertical: linear-gradient(180deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-gradient-display-diagonal: linear-gradient(135deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-color-surface: #14181f;
--vk-color-surface-alt: #1a1f29;
--vk-color-surface-sunken: #0e1117;
--vk-color-surface-hover: #222834;
--vk-color-text: #f1f4f9;
--vk-color-text-secondary: #aab4c5;
--vk-color-text-muted: #6b7688;
--vk-color-border: #2a313e;
--vk-color-border-strong: #3a4250;
--vk-color-success: #3dd68c;
--vk-color-success-light: #0c2b1e;
--vk-color-success-text: #4ade80;
--vk-color-warning: #f0a830;
--vk-color-warning-light: #2e2410;
--vk-color-warning-text: #fbbf45;
--vk-color-danger: #f2555a;
--vk-color-danger-hover: #f4696e;
--vk-color-danger-light: #2e1416;
--vk-color-danger-text: #ff7b80;
--vk-color-info: #3bb6ed;
--vk-color-info-light: #0c2733;
--vk-color-info-text: #5ac8f5;
--vk-color-overlay: rgba(2, 6, 16, 0.6);
--vk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
--vk-shadow-sm:
0 1px 2px rgba(0, 0, 0, 0.4),
0 1px 3px rgba(0, 0, 0, 0.5);
--vk-shadow-md:
0 2px 4px -1px rgba(0, 0, 0, 0.4),
0 4px 12px -2px rgba(0, 0, 0, 0.5);
--vk-shadow-lg:
0 4px 8px -2px rgba(0, 0, 0, 0.45),
0 12px 28px -6px rgba(0, 0, 0, 0.6);
--vk-shadow-xl:
0 8px 16px -4px rgba(0, 0, 0, 0.5),
0 24px 48px -12px rgba(0, 0, 0, 0.7);
--vk-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* System preference (unless the user has forced light) */
@media (prefers-color-scheme: dark) {
:root:not([data-vk-theme="light"]) {
color-scheme: dark;
--vk-color-primary: #7b7bf0;
--vk-color-primary-hover: #8c8cf4;
--vk-color-primary-active: #9d9df7;
--vk-color-primary-light: #24244a;
--vk-color-primary-subtle: #1a1a33;
--vk-color-on-primary: #ffffff;
--vk-color-accent: #a78bfa;
--vk-gradient-brand-end: var(--vk-color-accent);
--vk-gradient-display: linear-gradient(120deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-gradient-display-vertical: linear-gradient(180deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-gradient-display-diagonal: linear-gradient(135deg, var(--vk-color-primary), var(--vk-color-accent));
--vk-color-surface: #14181f;
--vk-color-surface-alt: #1a1f29;
--vk-color-surface-sunken: #0e1117;
--vk-color-surface-hover: #222834;
--vk-color-text: #f1f4f9;
--vk-color-text-secondary: #aab4c5;
--vk-color-text-muted: #6b7688;
--vk-color-border: #2a313e;
--vk-color-border-strong: #3a4250;
--vk-color-success: #3dd68c;
--vk-color-success-light: #0c2b1e;
--vk-color-success-text: #4ade80;
--vk-color-warning: #f0a830;
--vk-color-warning-light: #2e2410;
--vk-color-warning-text: #fbbf45;
--vk-color-danger: #f2555a;
--vk-color-danger-hover: #f4696e;
--vk-color-danger-light: #2e1416;
--vk-color-danger-text: #ff7b80;
--vk-color-info: #3bb6ed;
--vk-color-info-light: #0c2733;
--vk-color-info-text: #5ac8f5;
--vk-color-overlay: rgba(2, 6, 16, 0.6);
--vk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
--vk-shadow-sm:
0 1px 2px rgba(0, 0, 0, 0.4),
0 1px 3px rgba(0, 0, 0, 0.5);
--vk-shadow-md:
0 2px 4px -1px rgba(0, 0, 0, 0.4),
0 4px 12px -2px rgba(0, 0, 0, 0.5);
--vk-shadow-lg:
0 4px 8px -2px rgba(0, 0, 0, 0.45),
0 12px 28px -6px rgba(0, 0, 0, 0.6);
--vk-shadow-xl:
0 8px 16px -4px rgba(0, 0, 0, 0.5),
0 24px 48px -12px rgba(0, 0, 0, 0.7);
--vk-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--vk-transition-fast: 0ms;
--vk-transition-base: 0ms;
--vk-transition-slow: 0ms;
--vk-duration-fast: 0ms;
--vk-duration-base: 0ms;
--vk-duration-slow: 0ms;
}
}
/* ====================================================================== *
* Site chrome (internal — demo / docs / editor)
*
* Reserve header height before the custom element upgrades so the layout
* never collapses to zero and jumps when the shadow bar paints. Paired with
* `view-transition-name` on `` for stable MPA navigation.
* ====================================================================== */
vk-site-header:not(:defined) {
display: block;
min-height: 3.25rem;
}
/* ====================================================================== *
* Anti-FOUC cloak (tiered)
*
* Content-bearing components stay readable when undefined (no JS yet) —
* slotted text inherits design tokens from :root. Interactive controls and
* overlays stay hidden until upgraded so broken UI never flashes.
*
* Authors may set `class="no-js"` on `` server-side (or use the
* `