:root {
  /* Base Colors - Authentic Ice Cream & Lanna Architecture */
  --background: #F7E6D3; /* Warm vanilla cream base */
  --foreground: #2D1810; /* Deep brown text */
  --card: #FEFCF8; /* Warm white cards */
  --card-foreground: #2D1810;
  --popover: #FEFCF8;
  --popover-foreground: #2D1810;

  /* Brand Colors - From Actual Product */
  --primary: #FFD34D; /* Logo yellow - preserved brand color */
  --primary-foreground: #2D1810; /* Dark text on yellow */
  --secondary: #E8A87C; /* Peachy ice cream tone */
  --secondary-foreground: #2D1810;
  --muted: #F0DCC9; /* Muted cream */
  --muted-foreground: #6B5B4F; /* Warm gray */
  --accent: #B8856B; /* Terracotta gate color */
  --accent-foreground: #FEFCF8;

  /* Semantic Colors */
  --destructive: #D2691E; /* Warm orange-red */
  --destructive-foreground: #FEFCF8;
  --border: #E0D0C0; /* Warm border */
  --input: #F5F0E8; /* Warm input background */
  --ring: #FFD34D; /* Focus ring - yellow */

  /* Chart Colors - Ice Cream & Architecture Palette */
  --chart-1: #FFD34D; /* Mango yellow */
  --chart-2: #E8A87C; /* Peach ice cream */
  --chart-3: #B8856B; /* Terracotta gate */
  --chart-4: #A67C5A; /* Darker brick */
  --chart-5: #F4C2A1; /* Light peach */

  /* Sidebar Colors */
  --sidebar: #FEFCF8;
  --sidebar-foreground: #2D1810;
  --sidebar-primary: #B8856B;
  --sidebar-primary-foreground: #FEFCF8;
  --sidebar-accent: #E8A87C;
  --sidebar-accent-foreground: #2D1810;
  --sidebar-border: #E0D0C0;
  --sidebar-ring: #FFD34D;

  /* Typography - Bilingual Support with Varela Round */
  --font-sans: 'Varela Round', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  --font-serif: 'Varela Round', 'Noto Serif Thai', Georgia, serif;
  --font-mono: 'Varela Round', 'Courier New', monospace;
  --font-display: 'Varela Round', 'Noto Sans Thai', system-ui, sans-serif;

  /* Border Radius - Organic Ice Cream Shapes */
  --radius: 1.5rem; /* 24px - main radius */
  --radius-sm: 1rem; /* 16px */
  --radius-md: 1.25rem; /* 20px */
  --radius-lg: 1.5rem; /* 24px */
  --radius-xl: 1.75rem; /* 28px */

  /* Shadows - Warm & Natural */
  --shadow-2xs: 0 1px 2px 0 rgba(45, 24, 16, 0.04);
  --shadow-xs: 0 1px 3px 0 rgba(45, 24, 16, 0.06);
  --shadow-sm: 0 2px 4px -1px rgba(45, 24, 16, 0.06), 0 1px 2px -1px rgba(45, 24, 16, 0.04);
  --shadow: 0 4px 6px -1px rgba(45, 24, 16, 0.08), 0 2px 4px -1px rgba(45, 24, 16, 0.06);
  --shadow-md: 0 8px 12px -2px rgba(45, 24, 16, 0.08), 0 4px 6px -1px rgba(45, 24, 16, 0.06);
  --shadow-lg: 0 12px 20px -4px rgba(45, 24, 16, 0.10), 0 8px 12px -2px rgba(45, 24, 16, 0.08);
  --shadow-xl: 0 20px 32px -8px rgba(45, 24, 16, 0.12), 0 12px 20px -4px rgba(45, 24, 16, 0.10);
  --shadow-2xl: 0 32px 48px -12px rgba(45, 24, 16, 0.15);

  /* Glass Morphism for Header */
  --glass-bg: rgba(247, 230, 211, 0.85);
  --glass-border: rgba(255, 211, 77, 0.2);
  --glass-blur: blur(12px);

  /* Gradient Backgrounds - Ice Cream Inspired */
  --gradient-peach: linear-gradient(135deg, #F4C2A1 0%, #E8A87C 100%);
  --gradient-terracotta: linear-gradient(135deg, #B8856B 0%, #A67C5A 100%);
  --gradient-warm: linear-gradient(135deg, #F7E6D3 0%, #F0DCC9 100%);

  /* Spacing System */
  --spacing: 0.25rem; /* 4px base unit */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */

  /* Typography Scale */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Animation Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Lanna Pattern Opacity */
  --pattern-opacity: 0.05;
  --pattern-opacity-hover: 0.08;

  /* Product Specific Colors */
  --ice-cream-peach: #F4C2A1;
  --ice-cream-coral: #E8A87C;
  --gate-terracotta: #B8856B;
  --gate-brick: #A67C5A;
  --stick-wood: #8B4513;
}