/* ====================================================================== *
* Viber Kit — 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 the `:not(:defined)` cloak hides components until their custom-element
* definitions upgrade — eliminating the flash of unstyled content that an
* importmap + ES-module library would otherwise produce.
*
* 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;
/* 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: 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 */
--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-container-max-sm: 640px;
--vk-container-max-md: 768px;
--vk-container-max-lg: 1024px;
--vk-container-max-xl: 1280px;
}
/* ---------------------------------------------------------------------- *
* 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-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-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;
}
}
/* ====================================================================== *
* Anti-FOUC cloak
*
* Until each custom element is upgraded (`:defined`), hide its raw,
* unstyled light-DOM so it never flashes. `:where()` keeps specificity at
* 0 so your own styles always win once components are defined.
* ====================================================================== */
:where(
vk-container, vk-row, vk-col, vk-stack, vk-divider,
vk-page-header, vk-split, vk-toolbar, vk-filter-bar,
vk-text, vk-heading, vk-code, vk-blockquote, vk-source-code,
vk-markdown, vk-citation, vk-link, vk-highlight,
vk-card, vk-table, vk-accordion, vk-collapse, vk-carousel, vk-list,
vk-stat, vk-timeline, vk-kanban, vk-skeleton,
vk-empty, vk-description-list, vk-json, vk-diff, vk-comparison, vk-pinboard, vk-metric-row,
vk-alert, vk-badge, vk-progress, vk-spinner, vk-callout, vk-tag, vk-log, vk-meter,
vk-tabs, vk-navbar, vk-breadcrumb, vk-pagination, vk-sidebar, vk-steps, vk-menu, vk-tree, vk-command-palette,
vk-button, vk-toggle-button, vk-input, vk-select, vk-checkbox, vk-radio, vk-switch,
vk-form, vk-rating, vk-fieldset, vk-item-group,
vk-textarea, vk-search, vk-combobox, vk-slider, vk-file-input, vk-copy, vk-segmented,
vk-icon, vk-image, vk-avatar, vk-audio, vk-lightbox, vk-chart,
vk-chat-bubble, vk-chat-history, vk-calendar, vk-date-range, vk-heatmap, vk-editable,
vk-resize-handle
):not(:defined) {
visibility: hidden;
}
/* Overlays / floating components must take no space and never reveal
* slotted contents before their `display:none` host style applies. */
:where(
vk-modal, vk-drawer, vk-drawer-sidebar, vk-popover, vk-dock, vk-tooltip, vk-toast, vk-confirm, vk-lightbox, vk-command-palette
):not(:defined) {
display: none !important;
}
/* vk-dock push layout — applied to push-target (html or custom selector) */
html.vk-dock-push,
body.vk-dock-push,
.vk-dock-push {
transition:
margin-right var(--vk-duration-base) var(--vk-ease),
margin-left var(--vk-duration-base) var(--vk-ease);
}
html.vk-dock-push[data-vk-dock-placement="right"],
body.vk-dock-push[data-vk-dock-placement="right"],
.vk-dock-push[data-vk-dock-placement="right"] {
margin-right: var(--vk-dock-width, 400px);
}
html.vk-dock-push[data-vk-dock-placement="left"],
body.vk-dock-push[data-vk-dock-placement="left"],
.vk-dock-push[data-vk-dock-placement="left"] {
margin-left: var(--vk-dock-width, 400px);
}