:root {
  /* Brand Colors */
  --color-primary: #00C853;
  --color-bright: #00E676;
  --color-gold: #FFEB3B;
  --color-gold-dark: #FFD54F;
  --color-mint: #E8F5E9;
  --color-forest: #1B5E20;
  --color-white: #FFFFFF;
  --color-red: #F44336;
  --color-zalo: #0068FF;

  /* RGB channel tokens for rgba() usage */
  --color-zalo-rgb: 0, 104, 255;
  --color-primary-rgb: 0, 200, 83;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-bright));
  --gradient-gold: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));

  /* Typography */
  --ff-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fw-logo: 900;
  --fw-h1: 800;
  --fw-h2: 600;
  --fw-body: 400;
  --fw-cta: 700;
  --fw-legal: 400;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

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

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-cta: 0 4px 20px rgba(0, 200, 83, 0.35);
  --shadow-zalo: 0 4px 20px rgba(0, 104, 255, 0.35);

  /* Tap target minimum */
  --tap-min: 44px;
}