:root {
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --blur-sm: 10px;
  --blur-md: 18px;
  --blur-lg: 28px;
  --blur-xl: 38px;

  --shadow-soft: 0 16px 48px rgba(15, 23, 42, .08);
  --shadow-float: 0 24px 64px rgba(15, 23, 42, .12);

  --content-max: 1240px;
  --side-width: 320px;
  --header-height: 72px;

  --bg: #f5f5f7;
  --bg-elevated: rgba(255, 255, 255, .64);
  --bg-soft: rgba(255, 255, 255, .44);
  --bg-strong: rgba(255, 255, 255, .82);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;
  --line: rgba(60, 60, 67, .12);
  --line-strong: rgba(60, 60, 67, .2);
  --brand: var(--brand-light, #0071e3);
  --brand-soft: rgba(0, 113, 227, .14);
  --success: #30d158;
  --danger: #ff453a;

  --lp-hero-height: 600px;
  --lp-hero-radius: 48px;
  --lp-hero-bg: #ffffff;
  --lp-hero-text: #0a1b33;
  --lp-hero-text-2: #64748b;
  --lp-hero-btn-bg: #0a152d;
  --lp-hero-btn-text: #ffffff;
  --lp-nav-bg: rgba(255, 255, 255, .9);
  --lp-nav-border: rgba(148, 163, 184, .4);
  --lp-nav-text: #64748b;
  --lp-nav-text-hover: #0a1b33;
  --lp-card-bg: #ffffff;
  --lp-card-border: rgba(148, 163, 184, .6);
  --lp-card-hover-border: #cbd5e1;
  --lp-shadow-hero: 0 40px 100px -20px rgba(0, 0, 0, .03);
  --lp-shadow-nav: 0 12px 40px rgba(0, 0, 0, .08);
  --lp-shadow-card: 0 1px 2px rgba(0, 0, 0, .05);
}

html[data-theme="dark"] {
  --bg: #0b0b0f;
  --bg-elevated: rgba(28, 28, 30, .62);
  --bg-soft: rgba(44, 44, 46, .38);
  --bg-strong: rgba(28, 28, 30, .86);
  --text: #f5f5f7;
  --text-2: #c7c7cc;
  --text-3: #8e8e93;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);
  --brand: var(--brand-dark, #2997ff);
  --brand-soft: rgba(41, 151, 255, .14);
  --shadow-soft: 0 16px 48px rgba(0, 0, 0, .26);
  --shadow-float: 0 24px 64px rgba(0, 0, 0, .34);

  --lp-hero-bg: rgba(20, 20, 24, .92);
  --lp-hero-text: #f5f5f7;
  --lp-hero-text-2: #c7c7cc;
  --lp-hero-btn-bg: rgba(255, 255, 255, .12);
  --lp-hero-btn-text: #f5f5f7;
  --lp-nav-bg: rgba(28, 28, 30, .92);
  --lp-nav-border: rgba(255, 255, 255, .12);
  --lp-nav-text: #c7c7cc;
  --lp-nav-text-hover: #f5f5f7;
  --lp-card-bg: rgba(44, 44, 46, .62);
  --lp-card-border: rgba(255, 255, 255, .1);
  --lp-card-hover-border: rgba(255, 255, 255, .2);
  --lp-shadow-hero: 0 40px 100px -20px rgba(0, 0, 0, .2);
  --lp-shadow-nav: 0 12px 40px rgba(0, 0, 0, .2);
  --lp-shadow-card: 0 1px 2px rgba(0, 0, 0, .1);
}