/* ============================================================
   SHRESTA WOODPRESSED OILS — CSS Design Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Primary Palette — Natural Oils */
  --primary:        #C8860A;
  --primary-dark:   #A06A06;
  --primary-light:  #F0A828;
  --secondary:      #5C3A1E;
  --secondary-dark: #3D2510;
  --accent:         #F5C842;
  --accent-light:   #FDE68A;

  /* Background & Surface */
  --bg-cream:       #FDF6EC;
  --bg-warm:        #FAF0DC;
  --bg-white:       #FFFFFF;
  --bg-section:     #FFF8F0;
  --surface:        #FFFFFF;
  --surface-2:      #FDF6EC;

  /* Text */
  --text-dark:      #2C1A0E;
  --text-body:      #4A3728;
  --text-muted:     #7A6652;
  --text-light:     #A8977E;
  --text-on-primary:#FFFFFF;

  /* Borders */
  --border:         #E8D5B7;
  --border-focus:   #C8860A;

  /* Status */
  --success:        #22c55e;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #3b82f6;

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(92,58,30,0.08);
  --shadow-md:      0 4px 16px rgba(92,58,30,0.12);
  --shadow-lg:      0 8px 32px rgba(92,58,30,0.16);
  --shadow-xl:      0 20px 60px rgba(92,58,30,0.2);
  --glow-primary:   0 0 20px rgba(200,134,10,0.3);

  /* Typography */
  --font-heading:   'Playfair Display', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;

  /* Font Sizes */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  /* Spacing */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full:9999px;

  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Container */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2rem);
}