:root {
  --color-bg: #FAFAF8;
  --color-text: #1A1A2E;
  --color-text-secondary: #6B7280;
  --color-text-light: #9CA3AF;
  --color-accent: #4CAF8B;
  --color-accent-hover: #3D9A7A;
  --color-accent-light: #E8F5EE;
  --color-white: #FFFFFF;
  --color-border: #E5E7EB;

  --color-red: #DC2626;
  --color-red-bg: #FEF2F2;
  --color-red-border: #FECACA;

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 480px;
  --container-padding: 24px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 50px;

  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;
}

@media (min-width: 481px) {
  :root {
    --container-padding: 32px;
  }
}