/* Matcha Green Design System Tokens */
:root {
  /* Brand Color Palette - Matcha Green Theme */
  --matcha-50: #f4f9f5;
  --matcha-100: #e8f5eb;
  --matcha-200: #d8f3dc;
  --matcha-300: #b7e4c7;
  --matcha-400: #74c69d;
  --matcha-500: #52b788;
  --matcha-600: #40916c;
  --matcha-700: #2d6a4f;
  --matcha-800: #1b4332;
  --matcha-900: #081c15;

  /* Accent Colors */
  --accent-gold: #e9c46a;
  --accent-blue: #457b9d;
  --accent-red: #e63946;

  /* Neutral Surface & Background Colors */
  --bg-page: #fafcfa;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-subtle: #f2f7f4;

  /* Text Colors */
  --text-main: #1b4332;
  --text-body: #2d4a3e;
  --text-muted: #52796f;
  --text-light: #7b9e92;
  --text-on-matcha: #ffffff;

  /* Borders & Dividers */
  --border-light: #e2ece8;
  --border-matcha: #b7e4c7;
  --border-focus: #52b788;

  /* Shadows & Glowing Effects */
  --shadow-sm: 0 2px 8px rgba(27, 67, 50, 0.04);
  --shadow-md: 0 6px 20px rgba(27, 67, 50, 0.07);
  --shadow-lg: 0 16px 40px rgba(27, 67, 50, 0.14);
  --shadow-glow: 0 0 24px rgba(82, 183, 136, 0.35);
  --shadow-gold: 0 0 20px rgba(233, 196, 106, 0.3);

  /* Gradients */
  --gradient-matcha: linear-gradient(135deg, var(--matcha-600) 0%, var(--matcha-800) 100%);
  --gradient-matcha-light: linear-gradient(135deg, var(--matcha-50) 0%, var(--matcha-100) 100%);
  --gradient-accent: linear-gradient(135deg, #52b788 0%, #2d6a4f 100%);
  --gradient-gold: linear-gradient(135deg, #f4a261 0%, #e9c46a 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 249, 245, 0.95) 100%);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(183, 228, 199, 0.6);
  --glass-blur: blur(16px);

  /* Radius & Transitions */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}