/* ============================================
   DESIGN TOKENS — Shri Damodar Temple
   "Aged Temple at Golden Hour" palette
   ============================================ */

:root {
  /* ── Primary: Hindu Saffron (Bhagwa) ── */
  --color-saffron-50:  #FFF4E6;
  --color-saffron-100: #FFE4C4;
  --color-saffron-200: #FFCB8A;
  --color-saffron-300: #F5A623;
  --color-saffron-400: #F08D20;
  --color-saffron-500: #E8731A;
  --color-saffron-600: #D45E0A;
  --color-saffron-700: #B84D08;
  --color-saffron-800: #8E3B06;
  --color-saffron-900: #6A2C04;

  /* ── Secondary: Aged Temple Gold ── */
  --color-gold-50:  #FBF7ED;
  --color-gold-100: #F2EADA;
  --color-gold-200: #E3D4B0;
  --color-gold-300: #C9B27A;
  --color-gold-400: #B8960B;
  --color-gold-500: #A68524;
  --color-gold-600: #8A6E1B;
  --color-gold-700: #6E5714;
  --color-gold-800: #52410F;
  --color-gold-900: #362B0A;

  /* ── Sacred Vermillion (Sindoor/Kumkum) ── */
  --color-vermillion-50:  #FDF2EF;
  --color-vermillion-100: #F9DDD6;
  --color-vermillion-200: #EFB5A5;
  --color-vermillion-300: #DB7F69;
  --color-vermillion-400: #C34A2C;
  --color-vermillion-500: #A63D24;
  --color-vermillion-600: #89321E;
  --color-vermillion-700: #6B2718;

  /* ── Deep Maroon (Temple Drapes) ── */
  --color-maroon-50:  #F8F0F1;
  --color-maroon-100: #EADADA;
  --color-maroon-200: #CBA8AD;
  --color-maroon-300: #A87078;
  --color-maroon-400: #8B4A53;
  --color-maroon-500: #722F37;
  --color-maroon-600: #5C252D;
  --color-maroon-700: #461B22;

  /* ── Neutral: Warm Parchment & Earth ── */
  --color-ivory:     #FDF6F0;
  --color-cream:     #F8EDE4;
  --color-sand-100:  #F0E0D4;
  --color-sand-200:  #DDD4C2;
  --color-sand-300:  #C9BDA8;
  --color-stone-400: #9C8E79;
  --color-stone-500: #7A6E5C;
  --color-stone-600: #6B5D4E;
  --color-stone-700: #4A3F34;
  --color-stone-800: #2C2116;
  --color-stone-900: #2A1F18;

  /* ── Accent: Kushawati River ── */
  --color-river-50:  #EDF5F3;
  --color-river-100: #CCE5DF;
  --color-river-200: #99CBBF;
  --color-river-300: #5FAA9A;
  --color-river-400: #3D8D7C;
  --color-river-500: #2D7A6F;
  --color-river-600: #23625A;
  --color-river-700: #1A4B44;

  /* ── Semantic Aliases ── */
  --color-primary:        var(--color-saffron-500);
  --color-primary-light:  var(--color-saffron-400);
  --color-primary-dark:   var(--color-saffron-700);
  --color-secondary:      var(--color-gold-500);
  --color-secondary-dark: var(--color-gold-700);
  --color-accent:         var(--color-river-500);
  --color-accent-warm:    var(--color-vermillion-400);

  --color-text-primary:   #2C2116;
  --color-text-secondary: #5A4D40;
  --color-text-muted:     #7A6E5C;
  --color-text-inverse:   #FDF6F0;

  --color-bg-primary:     #FDF6F0;
  --color-bg-secondary:   #F8EDE4;
  --color-bg-tertiary:    #F0E0D4;
  --color-bg-dark:        #2A1F18;

  --color-border:         #DDD4C2;
  --color-border-light:   #EBE4D5;

  /* ── Typography ── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-accent:  'Cormorant Garamond', 'Playfair Display', Georgia, 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;

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.14em;

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

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-max:  1400px;
  --container-padding: 1.5rem;
  --header-height:          72px;
  --header-height-scrolled: 60px;

  /* ── Shadows — warm-tinted ── */
  --shadow-sm:    0 1px 3px rgba(44, 33, 22, 0.06);
  --shadow-md:    0 4px 12px rgba(44, 33, 22, 0.08);
  --shadow-lg:    0 8px 24px rgba(44, 33, 22, 0.10);
  --shadow-xl:    0 20px 50px rgba(44, 33, 22, 0.14);
  --shadow-inner: inset 0 2px 4px rgba(44, 33, 22, 0.06);
  --shadow-warm:  0 4px 20px rgba(200, 101, 27, 0.12);
  --shadow-card:  0 2px 4px rgba(44,33,22,0.04), 0 8px 20px rgba(44,33,22,0.06);
  --shadow-card-hover: 0 4px 8px rgba(44,33,22,0.06), 0 16px 40px rgba(44,33,22,0.10);

  /* ── Borders ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --border-thin:  1px solid var(--color-border);
  --border-gold:  3px solid var(--color-gold-400);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --ease-out-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);

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

  /* ── Ornamental ── */
  --ornament-color: var(--color-gold-400);
  --ornament-color-light: var(--color-gold-200);
  --pattern-opacity: 0.04;
}