/* @bulk:start mas-front/kits/website-kit/tokens stylesheet Website Kit Tokens */
:root {
  --web-font-display: 'Inter', 'Cairo', var(--mas-font-sans);
  --web-font-body: var(--mas-font-sans);
  --web-hero-min-h: min(82svh, 820px);
  --web-hero-overlay: rgba(0, 0, 0, 0.45);
  --web-section-pad: clamp(2.1rem, 4.8vw, 4.4rem);
  --web-section-pad-sm: clamp(1.55rem, 3.4vw, 2.9rem);
  --web-section-gap: clamp(1rem, 2.4vw, 1.8rem);
  --web-content-max: 1280px;
  --web-content-wide: 1480px;
  --web-content-narrow: 860px;
  --web-nav-h: 72px;
  --web-nav-bg: color-mix(in srgb, var(--mas-bg) 72%, transparent);
  --web-nav-solid-bg: color-mix(in srgb, var(--mas-surface) 86%, transparent);
  --web-text: var(--mas-text);
  --web-page-bg: var(--mas-bg);
  --web-card-border: var(--web-border);
  --web-radius-card: var(--web-radius-2xl);
  --web-card-bg: color-mix(in srgb, var(--mas-surface) 80%, transparent);
  --web-card-bg-strong: color-mix(in srgb, var(--mas-surface-2) 92%, transparent);
  --web-glass-bg: rgba(255, 255, 255, 0.06);
  --web-glass-border: rgba(255, 255, 255, 0.12);
  --web-glass-blur: 20px;
  --web-fade-duration: 0.6s;
  --web-stagger-delay: 0.08s;
  --web-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --web-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --web-grad-hero: linear-gradient(135deg, var(--mas-primary), var(--mas-accent));
  --web-grad-cta: linear-gradient(135deg, var(--mas-accent), var(--mas-primary));
  --web-grad-surface: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--mas-primary) 24%, transparent), transparent 34%), radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--mas-accent) 24%, transparent), transparent 30%), var(--mas-bg);
  --web-grad-dark: linear-gradient(135deg, color-mix(in srgb, var(--mas-bg) 92%, var(--mas-primary)), color-mix(in srgb, var(--mas-bg) 86%, var(--mas-accent)));
  --web-shadow-hero: 0 25px 60px rgba(0, 0, 0, 0.3);
  --web-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.12);
  --web-shadow-float: 0 18px 70px rgba(0, 0, 0, 0.18);
  --web-shadow-glow: 0 0 40px rgba(var(--mas-primary-rgb, 99, 102, 241), 0.3);
  --web-particle-color-1: var(--mas-primary);
  --web-particle-color-2: var(--mas-accent);
  --web-particle-color-3: var(--mas-info, var(--mas-primary-2));
  --web-particle-count: 40;
  --web-particle-speed: 0.3;
  --web-radius-2xl: calc(var(--mas-radius-xl) * 1.4);
  --web-border: color-mix(in srgb, var(--mas-border) 74%, transparent);
  --web-muted: color-mix(in srgb, var(--mas-muted) 84%, var(--mas-text));
  --web-focus: 0 0 0 4px color-mix(in srgb, var(--mas-primary) 24%, transparent);
  --web-type-hero: clamp(2.8rem, 5.8vw, 5.45rem);
  --web-type-section: clamp(1.9rem, 3.7vw, 3.25rem);
  --web-type-feature: clamp(1.85rem, 3.65vw, 3.15rem);
  --web-type-card: clamp(1.18rem, 1.75vw, 1.55rem);
  --web-nav-font: clamp(.92rem, .72vw, 1rem);
  --web-emoji-size: 1.35rem;
  --web-chart-bg: color-mix(in srgb, var(--mas-primary) 10%, var(--mas-surface));
  --web-chart-line: color-mix(in srgb, var(--mas-primary) 78%, var(--mas-accent));
  --web-chart-line-2: color-mix(in srgb, var(--mas-accent) 78%, var(--mas-primary));
}

[data-theme$="light"],
[data-theme="emerald"],
[data-theme="sand"] {
  --web-glass-bg: rgba(255, 255, 255, 0.72);
  --web-glass-border: rgba(0, 0, 0, 0.08);
  --web-hero-overlay: rgba(255, 255, 255, 0.38);
}
/* @bulk:end */