@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=Sriracha&display=swap');

:root {
  /* Color Palette */
  --color-primary-hue: 134; /* Green */
  --color-primary-saturation: 45%;
  
  --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), 38%); /* #388E3C */
  --color-primary-light: hsl(var(--color-primary-hue), var(--color-primary-saturation), 65%); /* #7EC080 */
  --color-primary-pastel: hsl(var(--color-primary-hue), 50%, 95%); /* #F1FAF2 */
  --color-primary-pastel-hover: hsl(var(--color-primary-hue), 45%, 90%);
  --color-primary-dark: hsl(var(--color-primary-hue), 60%, 22%); /* #174219 */
  
  --color-accent: hsl(38, 95%, 52%); /* Gold accent for stars, highlights */
  
  --color-white: #ffffff;
  --color-bg-light: #fafafa;
  --color-text-dark: #1e2621; /* Dark charcoal with green tint */
  --color-text-muted: #5e6b61;
  --color-border: #e0ebd3;
  
  /* Glassmorphism / UI Elements */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(46, 125, 50, 0.08);
  
  /* Typography */
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Kanit', sans-serif;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(46, 125, 50, 0.08);
  --shadow-lg: 0 16px 40px rgba(46, 125, 50, 0.12);
  
  /* Transition */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout Spacing */
  --container-max-width: 1200px;
}