:root {
  --color-deep: #021018;
  --color-bg: #07151c;
  --color-bg-mid: #0b1c26;
  --color-surface: #122830;
  --color-surface-hover: #17363f;
  --color-brand: #1a8fd4;
  --color-brand-dark: #1478b5;
  --color-brand-light: #5cc4f0;
  --color-brand-muted: rgba(26, 143, 212, 0.16);
  --color-brand-glow: rgba(26, 143, 212, 0.32);
  --color-brand-border: rgba(92, 196, 240, 0.28);
  --color-accent: #2dd4bf;
  --color-accent-dark: #14b8a6;
  --color-accent-light: #5eead4;
  --color-accent-muted: rgba(45, 212, 191, 0.12);
  --color-accent-glow: rgba(45, 212, 191, 0.28);
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-gray: #64748b;
  --color-white: #ffffff;
  --color-border: rgba(148, 163, 184, 0.16);
  --color-border-subtle: rgba(148, 163, 184, 0.1);
  --color-success: #34d399;
  --color-ml: #f4b247;
  --color-shopee: #ff7a59;
  --color-shein: #c997e4;
  --color-tiktok: #2dd4bf;

  --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(26, 143, 212, 0.28), transparent 55%),
    radial-gradient(900px 500px at 0% 20%, rgba(45, 212, 191, 0.16), transparent 50%),
    linear-gradient(165deg, #021018 0%, #07151c 46%, #0a2833 100%);
  --gradient-accent: linear-gradient(135deg, #2dd4bf 0%, #1a8fd4 100%);
  --gradient-text: linear-gradient(135deg, #5eead4 0%, #7dd3f7 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

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

  --text-display: clamp(2.15rem, 5vw, 3.6rem);
  --text-h1: clamp(1.9rem, 3.8vw, 2.85rem);
  --text-h2: clamp(1.65rem, 3vw, 2.25rem);
  --text-h3: 1.25rem;
  --text-lead: 1.0625rem;
  --text-body: 1rem;
  --text-xl: 1.125rem;
  --text-nav: 0.9375rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;

  --line-height-tight: 1.12;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide: 0.08em;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  --container-max: 1160px;
  --header-height: 76px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 12px 32px rgba(2, 16, 24, 0.4);
  --shadow-lg: 0 28px 70px rgba(2, 16, 24, 0.5);
  --shadow-phone: 0 30px 80px rgba(2, 16, 24, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-accent: 0 10px 28px var(--color-accent-glow);

  --transition: 0.22s ease;
  --header-bg: rgba(2, 16, 24, 0.82);
}