:root {
  color-scheme: dark;
  --background: #05080c;
  --background-deep: #020406;
  --surface: #0d1218;
  --surface-light: #141b23;
  --surface-hover: #1a222c;
  --surface-glass: rgba(13, 18, 24, 0.88);
  --surface-overlay: rgba(1, 4, 8, 0.72);

  --text: #f7f8fa;
  --muted-text: #9ba4b1;
  --subtle-text: #6f7884;

  --yellow: #ffbd00;
  --yellow-dark: #b87900;
  --purple: #8f39ff;
  --green: #20d98b;
  --blue: #2f8cff;
  --red: #ef4050;
  --teal: #18cbd1;

  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 189, 0, 0.45);

  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-heading: "Rajdhani", "Arial Narrow", "Inter", Arial, sans-serif;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.84rem;
  --font-size-base: 0.95rem;
  --font-size-md: 1.08rem;
  --font-size-lg: 1.34rem;
  --font-size-xl: clamp(1.7rem, 6vw, 2.5rem);
  --font-size-hero: clamp(2.45rem, 12vw, 4.5rem);
  --line-height: 1.5;

  --radius-small: 10px;
  --radius-medium: 18px;
  --radius-large: 28px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  --shadow-card: 0 12px 35px rgba(0, 0, 0, 0.35);
  --shadow-frame: 0 28px 90px rgba(0, 0, 0, 0.65);
  --shadow-modal: 0 32px 100px rgba(0, 0, 0, 0.72);
  --glow-yellow: 0 0 26px rgba(255, 189, 0, 0.18);
  --glow-purple: 0 0 26px rgba(143, 57, 255, 0.22);
  --glow-blue: 0 0 24px rgba(47, 140, 255, 0.18);
  --glow-green: 0 0 24px rgba(32, 217, 139, 0.18);

  --app-max-width: 480px;
  --header-height: 72px;
  --bottom-nav-height: 78px;
  --product-gap: 12px;
  --section-gap: 24px;
  --touch-target: 44px;
  --animation-duration: 220ms;
  --animation-easing: cubic-bezier(.2, .8, .2, 1);
  --image-fit: cover;
  --image-position: center center;
  --image-scale: 1;
  --grid-column: auto;
  --grid-row: auto;
}