/**
 * Jai Balaji Namkeen & Gajak Bhandar
 * Visual Design System - Tokens & CSS Variables
 * 
 * Aesthetic: Traditional Indian taste + Premium packaged food brand + Modern ecommerce usability
 */

:root {
  /* ==========================================================================
     1. COLOR SYSTEM (Brand Identity Tokens - High Contrast & WCAG AAA/AA)
     ========================================================================== */
  --color-primary: #741B26;            /* Primary Maroon - Heritage brand core (9.2:1 on white) */
  --color-primary-dark: #4E1018;       /* Deep roasted maroon for headers & announcements (13.5:1 on white) */
  --color-primary-light: #8E2330;      /* Warm rich maroon */
  
  --color-secondary: #9B2D2D;          /* Deep Crimson Red - Highlights & offers */
  --color-secondary-dark: #741E1E;
  --color-secondary-light: #B43A3A;
  
  --color-gold: #C89A43;               /* Traditional Gold - Borders, emblem, motifs */
  --color-gold-light: #FFE082;         /* Bright warm gold for highlights on dark maroon (7.8:1 contrast) */
  --color-gold-dark: #8C5E14;          /* Rich antique dark gold for text on light surfaces (4.8:1 contrast) */
  --color-gold-glow: rgba(200, 154, 67, 0.22);
  
  --color-cream: #FBF1DD;              /* Warm Card & Container Background */
  --color-cream-light: #FDF8EE;        /* Light Cream surface */
  --color-cream-dark: #F2E3C4;         /* Rich Cream Accent */
  
  --color-paper: #FFFAF0;              /* Paper White Base */
  
  --color-brown: #4A2718;              /* Rich Earthy Clay/Wood Brown (8.5:1 on cream) */
  --color-brown-light: #6E3F29;
  
  --color-green: #2E6822;              /* Natural Vegetarian & Freshness Green (5.2:1 on white) */
  --color-green-light: #EBF5E7;        /* Soft green badge background */
  --color-green-dark: #1E4E16;         /* Deep Forest Green for readable text (7.5:1 on white) */
  
  --color-text-dark: #22140E;          /* Deep Charcoal Brown - High contrast body (14.2:1 on white) */
  --color-text-body: #38271E;          /* Body text color (10.8:1 on white) */
  --color-muted: #554136;              /* Muted secondary text & metadata (6.5:1 on white, WCAG AA compliant) */
  --color-text-on-dark: #FFFFFF;       /* 100% White on Maroon backgrounds (9.2:1 contrast) */
  
  --color-border: #E0C79E;             /* Defined warm border */
  --color-border-dark: #BFA070;        /* Defined border line */
  --color-border-gold: var(--color-gold);
  
  --color-surface-white: #FFFFFF;
  --color-surface-card: #FFFFFF;
  --color-surface-alt: var(--color-cream-light);
  --color-surface-warm: var(--color-cream);
  --color-bg-surface: #FFFFFF;

  /* Aliases */
  --color-primary-maroon: var(--color-primary);
  --color-deep-red: var(--color-primary-dark);
  --color-traditional-gold: var(--color-gold);
  --color-text-secondary: var(--color-muted);
  --color-natural-green: var(--color-green);
  --radius-full: 9999px;

  /* Status Colors */
  --color-success: #2E6822;
  --color-warning: #B45309;
  --color-error: #9B2D2D;
  --color-info: #1D4ED8;

  /* ==========================================================================
     2. TYPOGRAPHY SYSTEM
     ========================================================================== */
  /* Serif for Brand, H1, H2, H3, H4, Product titles, Major promotional headings */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-heading: var(--font-serif);
  
  /* Sans-serif for Navigation, Product metadata, Body, Forms, Buttons, UI */
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
  
  /* Accent font for Hindi text */
  --font-hindi: 'Rozha One', 'DM Serif Display', serif;

  /* Typography Scale (Slightly increased for premium Indian food brand legibility) */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.9375rem;    /* 15px */
  --text-base: 1.0625rem;  /* 17px */
  --text-md: 1.1875rem;    /* 19px */
  --text-lg: 1.375rem;     /* 22px (Product card titles) */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: 2rem;        /* 32px (Section subheadings) */
  --text-3xl: 2.375rem;    /* 38px (Section main headings) */
  --text-4xl: 3rem;        /* 48px (Hero titles) */
  --text-5xl: 3.75rem;     /* 60px (Large Hero titles) */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ==========================================================================
     3. SPACING SYSTEM (Editorial Whitespace Scale)
     ========================================================================== */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ==========================================================================
     4. BORDERS & RADII (Refined, elegant - not excessively app-like)
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;      /* Standard card & form radius */
  --radius-lg: 12px;     /* Outer container radius */
  --radius-xl: 16px;     /* Feature banner radius */
  --radius-pill: 9999px; /* Badges & pill buttons */
  --radius-arch: 100px 100px 8px 8px; /* Traditional Indian arched frame */

  /* ==========================================================================
     5. WARM SHADOWS (Soft, natural ambient lighting)
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(44, 27, 21, 0.04);
  --shadow-sm: 0 2px 5px rgba(44, 27, 21, 0.07);
  --shadow-md: 0 4px 14px rgba(44, 27, 21, 0.09);
  --shadow-lg: 0 10px 28px rgba(44, 27, 21, 0.12);
  --shadow-xl: 0 20px 40px rgba(44, 27, 21, 0.15);
  --shadow-gold: 0 4px 16px rgba(200, 154, 67, 0.25);
  --shadow-warm: 0 6px 20px rgba(90, 53, 36, 0.08);

  /* ==========================================================================
     6. LAYOUT CONTAINERS & DIMENSIONS
     ========================================================================== */
  --container-max-width: 1240px;
  --container-narrow-width: 860px;
  --container-wide-width: 1400px;
  
  --header-height-desktop: 88px;
  --header-height-mobile: 68px;

  /* ==========================================================================
     7. TRANSITIONS & Z-INDEX SCALE
     ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-drawer: 800;
  --z-modal: 900;
  --z-toast: 1000;
}