/* Design System - CSS Variables */
/* Brand colors, typography, spacing, and design tokens */

:root {
  /* Primary Brand Colors */
  --color-primary: #F5A623;        /* Vibrant Orange */
  --color-primary-hover: #E09416;  /* Darker Orange for hover */
  --color-accent: #E63946;         /* Bright Red */

  /* Supporting Colors */
  --color-dark-brown: #5C3317;     /* Dark Brown */
  --color-golden: #F4C430;         /* Golden Yellow */
  --color-cream: #FFF8E7;          /* Cream/Off-white */

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-text: #2C2C2C;           /* Dark Gray for text */
  --color-text-light: #666666;     /* Light Gray for secondary text */
  --color-border: #E0E0E0;         /* Light border color */

  /* Semantic Colors */
  --color-success: #4CAF50;        /* Green for success states */
  --color-whatsapp: #25D366;       /* WhatsApp brand green */

  /* Typography - Font Families */
  --font-hindi: 'Noto Sans Devanagari', sans-serif;
  --font-english: 'Poppins', sans-serif;

  /* Typography Scale - Mobile (Base) */
  --font-size-small: 14px;
  --font-size-base: 16px;
  --font-size-medium: 18px;
  --font-size-large: 24px;
  --font-size-xlarge: 28px;
  --font-size-xxlarge: 32px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing Scale */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 80px;

  /* Border Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-large: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Container Widths */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 1200px;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1440px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Header */
  --header-height-mobile: 70px;
  --header-height-desktop: 80px;

  /* Z-index Scale */
  --z-header: 1000;
  --z-overlay: 900;
  --z-modal: 1100;
}

/* Typography Scale - Desktop */
@media (min-width: 1024px) {
  :root {
    --font-size-base: 18px;
    --font-size-large: 28px;
    --font-size-xlarge: 36px;
    --font-size-xxlarge: 48px;
  }
}