/* ==========================================================================
   KashiVedicConnect.com — Global Design Tokens
   ROYAL DARK-GOLD THEME  (matched to kvc-website.html design language)
   NOTE: Token *names* kept identical so all component CSS continues to work.
   Semantic mapping on dark theme:
     ivory family    → dark page/section backgrounds
     charcoal family → light text colours (headings / body / muted)
     sand family     → gold hairline borders
     white           → pure white (text on gold/saffron only)
     surface         → elevated card backgrounds (new)
   ========================================================================== */

:root {

  /* ════════════════════════════════════════════════════════════════
     COLOR PALETTE — Royal Kashi Night Palette
     ════════════════════════════════════════════════════════════════ */

  /* Backgrounds (was Ivory) */
  --color-ivory:        #0D0B07;   /* base page background */
  --color-ivory-light:  #131009;   /* alternating section */
  --color-ivory-dark:   #1C160D;   /* raised section / soft card */
  --color-ivory-deeper: #231D10;   /* deepest raised tone */

  /* Elevated Surfaces (was white card backgrounds) */
  --color-surface:      #171208;
  --color-surface-2:    #1F1810;

  /* Gold — Royal Temple Gold (Primary Brand) */
  --color-gold:         #C9A84C;
  --color-gold-light:   #E2C97E;
  --color-gold-pale:    #F0DFA0;
  --color-gold-dark:    #8B6914;
  --color-gold-deeper:  #6E520E;
  --color-gold-10:      rgba(201, 168, 76, 0.10);
  --color-gold-20:      rgba(201, 168, 76, 0.20);
  --color-gold-30:      rgba(201, 168, 76, 0.30);
  --color-gold-50:      rgba(201, 168, 76, 0.50);

  /* Saffron — Sacred Saffron (Accent) */
  --color-saffron:        #E8842C;
  --color-saffron-light:  #F5A050;
  --color-saffron-dark:   #C56618;
  --color-saffron-10:     rgba(232, 132, 44, 0.10);
  --color-saffron-20:     rgba(232, 132, 44, 0.20);

  /* Maroon — Sacred Maroon (Deep Accent) */
  --color-maroon:         #A83368;
  --color-maroon-light:   #C04B80;
  --color-maroon-dark:    #8B2252;
  --color-maroon-10:      rgba(168, 51, 104, 0.12);

  /* Borders (was Sand) — gold hairlines */
  --color-sand:        rgba(201, 168, 76, 0.22);
  --color-sand-light:  rgba(201, 168, 76, 0.12);
  --color-sand-dark:   rgba(201, 168, 76, 0.38);

  /* Text (was Charcoal) — contrast-safe on dark */
  --color-charcoal:         #F0E8CC;   /* headings  — 12.5:1 */
  --color-charcoal-light:   #D8CCAC;   /* strong body */
  --color-charcoal-lighter: #B0A080;   /* secondary — AA safe */

  /* Deep Night — darkest section backgrounds */
  --color-deep:        #0A0805;
  --color-deep-mid:    #100D08;
  --color-deep-light:  #1C160D;
  --color-deep-warm:   #2E2218;

  /* Whites & Neutrals */
  --color-white: #FFFFFF;
  --color-black: #060503;

  /* Functional Overlays */
  --color-overlay:       rgba(6, 5, 3, 0.55);
  --color-overlay-dark:  rgba(6, 5, 3, 0.78);
  --color-overlay-light: rgba(6, 5, 3, 0.32);
  --color-overlay-gold:  rgba(201, 168, 76, 0.08);


  /* ════════════════════════════════════════════════════════════════
     GRADIENTS — Sacred Color Gradients
     ════════════════════════════════════════════════════════════════ */

  --gradient-gold:          linear-gradient(135deg, #7A5C10 0%, #C9A84C 45%, #F0DFA0 100%);
  --gradient-gold-h:        linear-gradient(90deg,  #7A5C10 0%, #C9A84C 50%, #F0DFA0 100%);
  --gradient-gold-subtle:   linear-gradient(135deg, rgba(201,168,76,0.14) 0%, rgba(240,223,160,0.05) 100%);
  --gradient-saffron:       linear-gradient(135deg, #C56618 0%, #E8842C 50%, #F5A050 100%);
  --gradient-maroon:        linear-gradient(135deg, #6A1A3E 0%, #8B2252 60%, #A83368 100%);
  --gradient-hero:          linear-gradient(180deg, rgba(6,5,3,0.35) 0%, rgba(6,5,3,0.60) 60%, rgba(6,5,3,0.88) 100%);
  --gradient-dark-section:  linear-gradient(180deg, var(--color-deep) 0%, var(--color-deep-mid) 100%);
  --gradient-ivory:         linear-gradient(180deg, var(--color-ivory-light) 0%, var(--color-ivory) 50%, var(--color-ivory-light) 100%);
  --gradient-section-divider: linear-gradient(90deg, transparent, var(--color-gold), transparent);


  /* ════════════════════════════════════════════════════════════════
     TYPOGRAPHY — Cinzel / Raleway / EB Garamond (kvc design language)
     ════════════════════════════════════════════════════════════════ */

  /* Font Families */
  --font-heading:  'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body:     'Raleway', 'Inter', 'Helvetica Neue', sans-serif;
  --font-accent:   'EB Garamond', Georgia, serif;
  --font-sanskrit: 'Noto Serif Devanagari', 'Mangal', serif;

  /* Aliases used by some layout rules */
  --font-family-heading: var(--font-heading);
  --font-family-body:    var(--font-body);

  /* Font Sizes — Fluid Scale */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;
  --font-size-3xl:  2.5rem;
  --font-size-4xl:  3rem;
  --font-size-5xl:  3.75rem;
  --font-size-6xl:  4.5rem;

  /* Fluid Clamps (Cinzel runs wide — slightly reduced) */
  --font-size-hero:       clamp(2.2rem, 5.5vw, 4.25rem);
  --font-size-section-h:  clamp(1.75rem, 3.5vw, 2.75rem);
  --font-size-card-h:     clamp(1.125rem, 1.8vw, 1.375rem);

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

  /* Line Heights */
  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.65;
  --line-height-relaxed: 1.8;
  --line-height-loose:   2;

  /* Letter Spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0.01em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.22em;


  /* ════════════════════════════════════════════════════════════════
     SPACING — 8-point grid
     ════════════════════════════════════════════════════════════════ */

  --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;
  --space-40: 10rem;
  --space-48: 12rem;


  /* ════════════════════════════════════════════════════════════════
     BORDER RADIUS — restrained, temple-architecture feel
     ════════════════════════════════════════════════════════════════ */

  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  10px;
  --radius-3xl:  14px;
  --radius-full: 9999px;


  /* ════════════════════════════════════════════════════════════════
     SHADOWS — deep night elevation
     ════════════════════════════════════════════════════════════════ */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 24px 72px rgba(0, 0, 0, 0.60), 0 12px 24px rgba(0, 0, 0, 0.40);

  /* Gold Glow Shadows */
  --shadow-gold-sm:  0 2px 16px rgba(201, 168, 76, 0.16), 0 0 6px rgba(201, 168, 76, 0.10);
  --shadow-gold:     0 4px 24px rgba(201, 168, 76, 0.24), 0 0 12px rgba(201, 168, 76, 0.14);
  --shadow-gold-lg:  0 8px 40px rgba(201, 168, 76, 0.30), 0 0 24px rgba(201, 168, 76, 0.18);
  --shadow-gold-xl:  0 16px 60px rgba(201, 168, 76, 0.35), 0 0 40px rgba(201, 168, 76, 0.22);

  /* Saffron Glow */
  --shadow-saffron:  0 4px 24px rgba(232, 132, 44, 0.25), 0 0 12px rgba(232, 132, 44, 0.15);

  /* Inset Shadow (for pressed states) */
  --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.45);


  /* ════════════════════════════════════════════════════════════════
     BORDERS
     ════════════════════════════════════════════════════════════════ */

  --border-gold:        1px solid rgba(201, 168, 76, 0.30);
  --border-gold-strong: 1px solid rgba(201, 168, 76, 0.60);
  --border-gold-subtle: 1px solid rgba(201, 168, 76, 0.14);
  --border-sand:        1px solid var(--color-sand);
  --border-dark-gold:   1px solid rgba(201, 168, 76, 0.25);

  /* Glass borders */
  --border-glass:        1px solid rgba(255, 255, 255, 0.10);
  --border-glass-gold:   1px solid rgba(201, 168, 76, 0.30);


  /* ════════════════════════════════════════════════════════════════
     GLASS MORPHISM — dark glass
     ════════════════════════════════════════════════════════════════ */

  --glass-bg:          rgba(13, 11, 7, 0.85);
  --glass-bg-dark:     rgba(6, 5, 3, 0.80);
  --glass-bg-gold:     rgba(201, 168, 76, 0.08);
  --glass-blur:        blur(20px);
  --glass-blur-heavy:  blur(40px);


  /* ════════════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ════════════════════════════════════════════════════════════════ */

  --transition-instant: 80ms ease;
  --transition-fast:    180ms ease;
  --transition-base:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    450ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  550ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce:  600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Easing curves */
  --ease-out-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ════════════════════════════════════════════════════════════════
     Z-INDEX LAYERS
     ════════════════════════════════════════════════════════════════ */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-max:      9999;


  /* ════════════════════════════════════════════════════════════════
     LAYOUT
     ════════════════════════════════════════════════════════════════ */

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-3xl: 1680px;

  /* Navigation */
  --nav-height:        76px;
  --nav-height-mobile: 64px;

  /* Section rhythm */
  --section-padding:        clamp(4rem, 8vw, 7.5rem);
  --section-padding-sm:     clamp(2.5rem, 5vw, 5rem);

}