// BetterGuard design tokens (SCSS). Generated; do not edit by hand.

$color-bg-primary: #0a0a0f;
$color-bg-secondary: #1D1D1F;
$color-bg-elevated: #1a1a2e;
$color-bg-section-alt: #111116;
$color-bg-sidebar: #0f0f18;
$color-bg-workspace: #0d0d14;
$color-bg-input: #1a1a24;
$color-bg-modal: #1a1a2e;
$color-bg-control: #0f0f1a;
$color-bg-dark: #000000;
$color-cyan: #00B8D4;
$color-cyan-hover: #00E5FF;
$color-cyan-dark: #0097A7;
$color-cyan-very-dark: #00515e;
$color-purple: #7C4DFF;
$color-purple-hover: #9D7EFF;
$color-purple-light: #B794FF;
$color-purple-very-dark: #4527A0;
$color-text-primary: #FFFFFF;
$color-text-secondary: #86868B;
$color-text-tertiary: #6E6E73;
$color-text-inverse: #1D1D1F;
$color-link: #00B8D4;
$color-link-hover: #00E5FF;
$color-success: #22c55e;
$color-success-light: #4ade80;
$color-warning: #f59e0b;
$color-warning-light: #fbbf24;
$color-warning-accent: #fb923c;
$color-error: #ef4444;
$color-error-light: #f87171;
$color-footer-bg: #1D1D1F;
$color-footer-text: #A1A1A6;
$color-footer-text-hover: #F5F5F7;
$color-footer-heading: #D2D2D7;
$color-footer-border: #424245;
$color-footer-copyright: #8E8E93;
$color-pwa-theme: #0B0E13;
$color-pwa-background: #0B0E13;
$color-meta-theme-page: #00e5ff;
$color-border: rgba(255, 255, 255, 0.08);
$color-border-hover: rgba(0, 184, 212, 0.3);
$color-surface: rgba(255, 255, 255, 0.03);
$color-surface-hover: rgba(255, 255, 255, 0.06);
$color-pro-card-border: rgba(0, 184, 212, 0.2);
$color-pro-card-border-hover: rgba(0, 184, 212, 0.5);
$color-section-badge-bg: rgba(0, 184, 212, 0.12);
$color-section-badge-border: rgba(0, 184, 212, 0.25);
$color-success-bg: rgba(34, 197, 94, 0.15);
$icon-bg-cyan: rgba(0, 139, 139, 0.3);
$icon-bg-green: rgba(34, 197, 94, 0.3);
$icon-bg-purple: rgba(124, 77, 255, 0.3);
$icon-bg-orange: rgba(251, 146, 60, 0.3);
$icon-bg-blue: rgba(59, 130, 246, 0.3);
$icon-bg-red: rgba(239, 68, 68, 0.3);
$font-display: Sora, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-body: Sora, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
$text-hero-size: clamp(48px, 8vw, 80px);
$text-hero-weight: 700;
$text-section-lg-size: clamp(36px, 5vw, 56px);
$text-section-lg-weight: 700;
$text-section-md-size: clamp(28px, 4vw, 40px);
$text-section-md-weight: 600;
$text-section-sm-size: clamp(22px, 3vw, 28px);
$text-section-sm-weight: 600;
$text-lead-size: 21px;
$text-lead-weight: 400;
$text-body-size: 17px;
$text-body-weight: 400;
$text-small-size: 14px;
$text-small-weight: 400;
$text-nav-size: 12px;
$text-nav-weight: 400;
$text-oversized-size: clamp(64px, 10vw, 120px);
$text-oversized-weight: 700;
$space-xs: 4px;
$space-sm: 8px;
$space-md: 16px;
$space-lg: 24px;
$space-xl: 40px;
$space-2xl: 60px;
$space-3xl: 80px;
$space-section: clamp(60px, 10vw, 120px);
$space-gutter: 20px;
$space-container-px: 22px;
$space-nav-height: 48px;
$max-width-content: 980px;
$max-width-wide: 1440px;
$max-width-narrow: 680px;
$max-width-pricing-grid: 1120px;
$radius-skip-link: 0 0 4px 0;
$radius-chip: 4px;
$radius-control: 8px;
$radius-related: 12px;
$radius-card: 16px;
$radius-pricing-card: 28px;
$radius-pill: 9999px;
$shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
$shadow-btn-brand-hover: 0 10px 40px rgba(0, 229, 255, 0.4);
$shadow-landing-card-hover: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 229, 255, 0.1);
$shadow-pricing-card-hover: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 229, 255, 0.15);
$shadow-pr-card: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
$shadow-pr-card-hover: 0 16px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
$shadow-pr-card-pro: 0 0 120px -30px rgba(0, 184, 212, 0.15), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(0, 184, 212, 0.12);
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
$shadow-glow-cyan: 0 0 20px rgba(0, 229, 255, 0.4), 0 0 40px rgba(0, 229, 255, 0.2);
$shadow-glow-purple: 0 0 20px rgba(157, 126, 255, 0.4), 0 0 40px rgba(157, 126, 255, 0.2);
$shadow-glow-brand: 0 0 30px rgba(0, 229, 255, 0.4), 0 0 60px rgba(157, 126, 255, 0.3);
$gradient-brand: linear-gradient(135deg, #00B8D4, #9D7EFF);
$gradient-brand-text: linear-gradient(135deg, #00E5FF, #B794FF);
$gradient-card-basic: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
$gradient-card-pro: linear-gradient(145deg, #0f3460 0%, #16213e 30%, #0f3460 70%, #00B8D4 100%);
$gradient-card-enterprise: linear-gradient(145deg, #533483 0%, #16213e 30%, #0f3460 70%, #7C4DFF 100%);
$gradient-hero-brand: linear-gradient(135deg, #000000 0%, #0a0a0f 30%, #00515e 60%, #4527A0 100%);
$gradient-toggle-active: linear-gradient(135deg, #00B8D4 0%, #7C4DFF 100%);
$gradient-sidebar: linear-gradient(180deg, #121220 0%, #0f0f18 40%, #0c0c15 100%);