/* =============================================
   NAVBODHI — Design Tokens & CSS Variables
   Artisanal Handicraft Export Store
   ============================================= */

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

:root {
  /* ── Colour Palette ── */
  --color-earth:        #7B3F1A;   /* Deep terracotta brown */
  --color-clay:         #B5541A;   /* Terracotta orange */
  --color-sun:          #D4921E;   /* Golden ochre */
  --color-sage:         #4A6741;   /* Forest sage */
  --color-teal:         #2C6B68;   /* Deep teal */
  --color-ivory:        #FAF5EF;   /* Warm ivory background */
  --color-cream:        #F2E8D9;   /* Cream */
  --color-sand:         #E8D5B7;   /* Sand */
  --color-charcoal:     #2A1F14;   /* Deep brown-black */
  --color-text:         #3D2B1A;   /* Body text */
  --color-muted:        #7A6251;   /* Muted/secondary text */
  --color-border:       #D8C4A8;   /* Border color */
  --color-white:        #FFFFFF;

  /* ── Typography ── */
  --font-display:       'Cormorant Garamond', 'Noto Serif', Georgia, serif;
  --font-body:          'Jost', 'Segoe UI', system-ui, sans-serif;

  /* ── Type Scale ── */
  --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;
  --text-7xl:   4.5rem;

  /* ── 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;
  --space-32:   8rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(42, 31, 20, 0.08);
  --shadow-md:   0 4px 16px rgba(42, 31, 20, 0.12);
  --shadow-lg:   0 8px 32px rgba(42, 31, 20, 0.16);
  --shadow-xl:   0 16px 48px rgba(42, 31, 20, 0.2);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --trans-fast: 150ms var(--ease-out);
  --trans-med:  300ms var(--ease-out);
  --trans-slow: 500ms var(--ease-out);

  /* ── Layout ── */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 4vw, 3rem);
  --nav-height:     72px;
}