/* GENERATED CODE - DO NOT MODIFY BY HAND. */
/* Source: design/veribark_design_tokens.json */

:root {
  --vb-color-white: #FFFFFF;
  --vb-color-black: #000000;
  --vb-color-black-soft: #1A1A1A;
  --vb-color-black-muted: #333333;
  --vb-color-brand-purple: #5A3FA0;
  --vb-color-brand-purple-deep: #4A148C;
  --vb-color-brand-purple-dark-muted: #4A2F90;
  --vb-color-brand-purple-headline: #3D2670;
  --vb-color-brand-purple-mid: #6A1B9A;
  --vb-color-brand-purple-accent: #7B1FA2;
  --vb-color-brand-purple-accent-overlay: rgba(123, 31, 162, 0.149);
  --vb-color-brand-purple-muted: #9575CD;
  --vb-color-brand-purple-border: #B39DDB;
  --vb-color-brand-purple-surface: #D1C4E9;
  --vb-color-brand-purple-surface-soft: #D8CCEC;
  --vb-color-brand-purple-background: #EDE7F6;
  --vb-color-brand-purple-dock-light: #E7DCF5;
  --vb-color-brand-purple-dock-dark: #2A2640;
  --vb-color-lilac-background: #F0E6FA;
  --vb-color-brand-teal: #2FB7B3;
  --vb-color-brand-teal-bright: #39D2C0;
  --vb-color-brand-teal-deep: #009688;
  --vb-color-brand-coral: #EE8B60;
  --vb-color-brand-purple-overlay: rgba(90, 63, 160, 0.298);
  --vb-color-brand-teal-overlay: rgba(57, 210, 192, 0.302);
  --vb-color-brand-coral-overlay: rgba(238, 139, 96, 0.302);
  --vb-color-surface-overlay-light: rgba(255, 255, 255, 0.8);
  --vb-color-surface-overlay-dark: rgba(38, 45, 52, 0.698);
  --vb-color-social-instagram-orange: #F58529;
  --vb-color-social-instagram-pink: #DD2A7B;
  --vb-color-social-instagram-purple: #8134AF;
  --vb-color-social-instagram-blue: #515BD4;
  --vb-color-social-facebook-blue: #1877F2;
  --vb-color-social-tiktok-black: #010101;
  --vb-color-text-primary-light: #14181B;
  --vb-color-text-secondary-light: #57636C;
  --vb-color-text-primary-dark: #FFFFFF;
  --vb-color-text-secondary-dark: #95A1AC;
  --vb-color-surface-light: #FFFFFF;
  --vb-color-surface-light-muted: #F1F4F8;
  --vb-color-surface-light-soft: #F5F5F5;
  --vb-color-surface-border-light: #E0E3E7;
  --vb-color-surface-dark: #14181B;
  --vb-color-surface-dark-alt: #1F1F1F;
  --vb-color-surface-border-dark: #262D34;
  --vb-color-scaffold-dark: #1D2428;
  --vb-color-slate-muted: #8B97A2;
  --vb-color-success: #249689;
  --vb-color-warning: #F9CF58;
  --vb-color-error: #FF5963;
  --vb-color-error-soft: #E57373;
  --vb-color-shadow-soft: rgba(0, 0, 0, 0.102);
  --vb-color-overlay-black20: rgba(0, 0, 0, 0.2);
  --vb-color-overlay-black16: rgba(22, 32, 42, 0.161);
  --vb-color-overlay-ink20: rgba(17, 20, 23, 0.204);
  --vb-color-overlay-dark: rgba(0, 0, 0, 0.38);
  --vb-color-overlay-dark-soft: rgba(0, 0, 0, 0.122);
  --vb-color-white70: rgba(255, 255, 255, 0.702);
  --vb-color-white54: rgba(255, 255, 255, 0.541);
  --vb-color-white38: rgba(255, 255, 255, 0.38);
  --vb-color-white24: rgba(255, 255, 255, 0.239);
  --vb-color-white12: rgba(255, 255, 255, 0.122);
  --vb-color-magic-moment-gradient-purple: #6E50A8;
  --vb-font-sans: "Inter";
  --vb-font-display: "Inter Tight";
  --vb-font-playful: "Playpen Sans";
  --vb-font-mono: "SpaceMono";
  --vb-spacing-xxs: 2px;
  --vb-spacing-xs: 4px;
  --vb-spacing-sm: 8px;
  --vb-spacing-md: 16px;
  --vb-spacing-lg: 24px;
  --vb-spacing-xl: 32px;
  --vb-spacing-xxl: 40px;
  --vb-radius-sm: 8px;
  --vb-radius-base: 10px;
  --vb-radius-md: 12px;
  --vb-radius-lg: 16px;
  --vb-radius-xl: 20px;
  --vb-radius-pill: 24px;
  --vb-radius-full: 999px;
  --vb-icon-size-xs: 14px;
  --vb-icon-size-sm: 16px;
  --vb-icon-size-base: 18px;
  --vb-icon-size-md: 20px;
  --vb-icon-size-lg: 24px;
  --vb-icon-size-xl: 32px;
  --vb-icon-size-hero: 48px;
  --vb-icon-size-xxl: 64px;
  --vb-border-width-thin: 1px;
  --vb-border-width-regular: 2px;
  --vb-border-width-strong: 3px;
  --vb-elevation-none: 0px;
  --vb-elevation-card: 2px;
  --vb-elevation-sheet: 3px;
  --vb-elevation-floating: 16px;
  --vb-control-height-sm: 36px;
  --vb-control-height-md: 40px;
  --vb-control-height-button: 48px;
  --vb-control-height-prominent-button: 50px;
  --vb-control-height-card-action: 52px;
  --vb-control-height-field: 56px;
  --vb-component-size-selector-hero: 140px;
  --vb-component-size-floating-badge: 32px;
  --vb-component-size-feedback-reaction: 64px;
  --vb-component-size-sheet-handle-width: 50px;
  --vb-component-size-sheet-handle-height: 5px;
  --vb-component-size-status-icon: 60px;
  --vb-layout-bottom-sheet-max-height-factor: 0.5;
  --vb-duration-fast: 150ms;
  --vb-duration-normal: 250ms;
  --vb-duration-slow: 400ms;
  --vb-opacity-subtle: 0.12;
  --vb-opacity-soft: 0.24;
  --vb-opacity-selected: 0.3;
  --vb-opacity-disabled: 0.38;
  --vb-opacity-scrim: 0.4;
  --vb-opacity-strong: 0.7;
  --vb-layer-base: 0;
  --vb-layer-inline-overlay: 10;
  --vb-layer-toolbar: 20;
  --vb-layer-sheet: 30;
  --vb-layer-modal: 40;
  --vb-theme-surface-base: var(--vb-color-lilac-background);
  --vb-theme-surface: var(--vb-color-surface-light);
  --vb-theme-surface-muted: var(--vb-color-brand-purple-background);
  --vb-theme-panel-background: var(--vb-color-brand-purple-background);
  --vb-theme-card-background: var(--vb-color-surface-light);
  --vb-theme-toolbar-background: var(--vb-color-lilac-background);
  --vb-theme-border-subtle: var(--vb-color-surface-border-light);
  --vb-theme-border-default: var(--vb-color-surface-border-light);
  --vb-theme-border-strong: var(--vb-color-brand-purple-border);
  --vb-theme-divider: var(--vb-color-surface-border-light);
  --vb-theme-overlay: var(--vb-color-overlay-dark);
  --vb-theme-text-primary: var(--vb-color-text-primary-light);
  --vb-theme-text-secondary: var(--vb-color-text-secondary-light);
  --vb-theme-text-on-brand: var(--vb-color-white);
  --vb-theme-text-success: var(--vb-color-success);
  --vb-theme-text-error: var(--vb-color-error);
  --vb-theme-interactive-primary: var(--vb-color-brand-purple);
  --vb-theme-interactive-selected: var(--vb-color-brand-purple-accent);
  --vb-theme-interactive-disabled: var(--vb-color-slate-muted);
  --vb-theme-success: var(--vb-color-success);
  --vb-theme-warning: var(--vb-color-warning);
  --vb-theme-error: var(--vb-color-error);
  --vb-theme-info: var(--vb-color-brand-teal);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vb-theme-surface-base: var(--vb-color-scaffold-dark);
    --vb-theme-surface: var(--vb-color-surface-dark);
    --vb-theme-surface-muted: var(--vb-color-surface-border-dark);
    --vb-theme-panel-background: var(--vb-color-surface-border-dark);
    --vb-theme-card-background: var(--vb-color-surface-dark);
    --vb-theme-toolbar-background: var(--vb-color-scaffold-dark);
    --vb-theme-border-subtle: var(--vb-color-surface-border-dark);
    --vb-theme-border-default: var(--vb-color-surface-border-dark);
    --vb-theme-border-strong: var(--vb-color-white24);
    --vb-theme-divider: var(--vb-color-surface-border-dark);
    --vb-theme-overlay: var(--vb-color-overlay-dark);
    --vb-theme-text-primary: var(--vb-color-text-primary-dark);
    --vb-theme-text-secondary: var(--vb-color-text-secondary-dark);
    --vb-theme-text-on-brand: var(--vb-color-white);
    --vb-theme-text-success: var(--vb-color-success);
    --vb-theme-text-error: var(--vb-color-error);
    --vb-theme-interactive-primary: var(--vb-color-brand-purple);
    --vb-theme-interactive-selected: var(--vb-color-brand-purple-accent);
    --vb-theme-interactive-disabled: var(--vb-color-white38);
    --vb-theme-success: var(--vb-color-success);
    --vb-theme-warning: var(--vb-color-warning);
    --vb-theme-error: var(--vb-color-error);
    --vb-theme-info: var(--vb-color-brand-teal-bright);
  }
}