:root {
  /* Colors - background */
  --color-bg-white: #ffffff;
  --color-bg-page: #f7f9fc;
  --color-bg-primary: #4678c0;
  --color-bg-yellow: #f5c16c;
  --color-bg-blue-light: #eff6ff;
  --color-bg-green-light: #f0fdf4;
  --color-bg-orange-light: #ffedd5;
  --color-bg-gray: #f3f4f6;

  /* Colors - text */
  --color-text-black: #000000;
  --color-text-dark: #1f2937;
  --color-text-muted: #64748b;
  --color-text-heading: #1e293b;
  --color-text-green: #16a34a;
  --color-text-green-light: #86efac;
  --color-text-orange: #ea580c;
  --color-text-orange-dark: #7c2d12;
  --color-text-orange-mid: #fb923c;
  --color-text-yellow: #eab308;
  --color-text-gray: #6b7280;
  --color-text-gray-light: #9ca3af;
  --color-text-danger: #dc2626;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Typography */
  --font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 22px;
  --font-size-5xl: 24px;
  --font-size-6xl: 30px;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-hero: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(70, 120, 192, 0.2) 0px 20px 25px -5px, rgba(70, 120, 192, 0.2) 0px 8px 10px -6px;
  --shadow-balance: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(30, 58, 138, 0.2) 0px 10px 15px -3px, rgba(30, 58, 138, 0.2) 0px 4px 6px -4px;
  --shadow-card: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 6px 18px 0px;
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Gradients */
  --gradient-page: linear-gradient(180deg, #f8fafc 0%, #eef2f7 50%, #f5f8fc 100%);
  --gradient-primary: linear-gradient(135deg, #6ba3e8 0%, #4678c0 55%, #5a8fd4 100%);
  --gradient-hero: linear-gradient(165deg, #4a7fc9 0%, #5b94db 40%, #85b8ef 75%, #b8d9f8 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 85%, #f1f5f9 100%);
  --gradient-card-glass: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);
  --gradient-balance: linear-gradient(135deg, #ffffff 0%, #f4f8fd 50%, #eef4fb 100%);
  --gradient-blue-soft: linear-gradient(135deg, #eff6ff 0%, #e8f0fe 50%, #dbeafe 100%);
  --gradient-green-soft: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #dcfce7 100%);
  --gradient-orange-soft: linear-gradient(135deg, #fffbeb 0%, #ffedd5 50%, #fed7aa 100%);
  --gradient-quick-blue: linear-gradient(145deg, #6ba8eb 0%, #4678c0 100%);
  --gradient-quick-orange: linear-gradient(145deg, #fdba74 0%, #ea580c 100%);
  --gradient-quick-green: linear-gradient(145deg, #6ee7a0 0%, #16a34a 100%);
  --gradient-btn: linear-gradient(135deg, #6ba3e8 0%, #4678c0 50%, #5a8fd4 100%);
  --gradient-btn-hover: linear-gradient(135deg, #7eb3ef 0%, #5289cc 50%, #6ba3e8 100%);
  --gradient-header: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  --gradient-profile: linear-gradient(160deg, #4a7fc9 0%, #6ba3e8 50%, #a8d4f5 100%);
  --gradient-alert: linear-gradient(135deg, #fff7ed 0%, #ffedd5 60%, #fed7aa 100%);
  --gradient-nav-active: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --gradient-input: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --gradient-tag: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --gradient-seller-dark: linear-gradient(145deg, #1e293b 0%, #0f172a 55%, #1a2744 100%);
  --gradient-seller-cta: linear-gradient(90deg, #fdba74 0%, #f97316 45%, #ea580c 100%);
  --gradient-robux-banner: linear-gradient(90deg, #4678c0 0%, #5a8fd4 42%, #93c5fd 100%);

  /* Layout */
  --header-height: 56px;
  --bottom-nav-height: 72px;
  --max-width: 480px;
}