/* ============================================================
   RADHA KRISHNA MANDIR — Design Tokens
   Global CSS custom properties for the "Traditional & Rich" theme
   ============================================================ */

:root {
  /* ── Color Palette ─────────────────────────────────────── */
  --burgundy:        #4A0E0E;
  --burgundy-light:  #6B1E1E;
  --burgundy-dark:   #360A0A;
  --gold:            #C5A059;
  --gold-light:      #D4B87A;
  --gold-dark:       #A8853E;
  --ivory:           #FFF9E5;
  --ivory-dark:      #F5EED6;
  --tan:             #E8DCC8;
  --tan-dark:        #D4C9B0;
  --white:           #FFFFFF;
  --black:           #1A1A1A;
  --text-body:       #3D2B1F;
  --text-muted:      #7A6A5E;
  --red-live:        #D32F2F;
  --green-secure:    #2E7D32;
  --overlay:         rgba(74, 14, 14, 0.85);
  --overlay-light:   rgba(74, 14, 14, 0.60);

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:       'Montserrat', 'Segoe UI', Roboto, sans-serif;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* ── Font Sizes (fluid-ready) ──────────────────────────── */
  --fs-xs:           0.75rem;   /* 12px */
  --fs-sm:           0.875rem;  /* 14px */
  --fs-base:         1rem;      /* 16px */
  --fs-md:           1.125rem;  /* 18px */
  --fs-lg:           1.25rem;   /* 20px */
  --fs-xl:           1.5rem;    /* 24px */
  --fs-2xl:          2rem;      /* 32px */
  --fs-3xl:          2.5rem;    /* 40px */
  --fs-4xl:          3rem;      /* 48px */

  /* ── Spacing Scale ─────────────────────────────────────── */
  --space-xs:        0.25rem;   /*  4px */
  --space-sm:        0.5rem;    /*  8px */
  --space-md:        1rem;      /* 16px */
  --space-lg:        1.5rem;    /* 24px */
  --space-xl:        2rem;      /* 32px */
  --space-2xl:       3rem;      /* 48px */
  --space-3xl:       4rem;      /* 64px */
  --space-4xl:       6rem;      /* 96px */

  /* ── Layout ────────────────────────────────────────────── */
  --max-width:       1200px;
  --header-height:   80px;
  --border-radius:   6px;
  --border-radius-lg: 12px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg:       0 8px 30px rgba(0, 0, 0, 0.16);
  --shadow-gold:     0 4px 20px rgba(197, 160, 89, 0.3);

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition:      250ms ease;
  --transition-slow: 400ms ease;
}

/* ── Breakpoints (reference only — use in @media) ─────────
   Mobile-first approach:
     Tablet:  @media (min-width: 768px)
     Desktop: @media (min-width: 1024px)
     Wide:    @media (min-width: 1280px)
   ───────────────────────────────────────────────────────── */