/* ── VedicHymns design tokens ──────────────────────────────────────────
   Temple at Dusk palette — Peacock · Forest · Gold · Midnight
   Edit ONLY this file to change colours site-wide.
   ─────────────────────────────────────────────────────────── */
:root {

  /* ── Peacock (primary brand spine) ───────────────────────── */
  --peacock:        #0D6B63;   /* primary CTA, active sidebar, links */
  --peacock-deep:   #0A3D3A;   /* hover states, sidebar bg */
  --peacock-light:  #12A99D;   /* highlights, icons, pills */
  --peacock-pale:   #E4F5F3;   /* page background (light mode) */
  --peacock-mid:    #1A8A82;   /* mid-tone for gradients */

  /* ── Midnight (dark backgrounds) ───────────────────────── */
  --midnight:       #050E1A;   /* darkest bg — nav, sidebar, hero */
  --midnight-2:     #071628;   /* slightly lighter dark panels */
  --midnight-3:     #0A1E36;   /* card bg on dark surfaces */

  /* ── Gold & Saffron (accents only) ─────────────────────── */
  --gold:           #C8861A;   /* credit badges, prices, highlights */
  --gold-light:     #E8A42A;   /* hover on gold */
  --gold-pale:      #FFF3D6;   /* gold tint backgrounds */
  --saffron:        #E85D20;   /* urgency, CTA hover, fire accent */

  /* ── Lotus (spiritual / feminine apps) ──────────────────── */
  --lotus:          #9B3D7A;   /* myKrishna header, lotus icon apps */
  --lotus-light:    #C86FAA;   /* lotus highlight */
  --lotus-pale:     #F9EAF5;   /* lotus tint bg */

  /* ── Star Silver (muted UI) ──────────────────────────── */
  --silver:         #8BA8C4;   /* muted borders, secondary icons */
  --silver-pale:    #D8E8F8;   /* light borders */

  /* ── Legacy aliases (keep for backward compat) ──────────────── */
  --blue:           var(--peacock);       /* was #1565C0 */
  --blue-mid:       var(--peacock-mid);   /* was #1976D2 */
  --blue-light:     var(--peacock-light); /* was #42A5F5 */
  --blue-pale:      var(--peacock-pale);  /* was #E3F2FD */
  --blue-dark:      var(--peacock-deep);  /* was #0D47A1 */
  --blue-midnight:  var(--midnight);      /* was #040D1A */
  --blue-deep:      var(--midnight-2);    /* was #071428 */
  --teal:           var(--peacock);       /* was #00897B */
  --teal-light:     var(--peacock-light); /* was #26A69A */
  --teal-pale:      var(--peacock-pale);  /* was #E0F2F1 */
  --gold-old:       #F9A825;              /* old bright gold — avoid */

  /* ── Neutrals ─────────────────────────────────────────── */
  --cream:          var(--peacock-pale);  /* page bg */
  --warm-white:     #F0F8F7;              /* card bg on light */
  --warm-bg:        #E4F5F3;             /* iframe pane bg */
  --dark:           var(--midnight);     /* darkest surface */
  --dark-mid:       var(--midnight-2);
  --dark-sidebar:   #040C18;             /* sidebar — slightly deeper than midnight */

  /* ── Text ───────────────────────────────────────────── */
  --text:           #0A2A28;             /* body text — deep forest green */
  --text-mid:       #1A4A46;             /* mid text */
  --muted:          #4A7A74;             /* muted — peacock-tinted grey */

  /* ── Borders ─────────────────────────────────────────── */
  --border:         #B0D4D0;             /* default border */
  --border-light:   #D0ECEA;             /* subtle border */

  /* ── Semantic ────────────────────────────────────────── */
  --green:          #1A6B3C;
  --green-light:    #2EAD63;
  --green-pale:     #EDF7F1;

  /* ── Typography ───────────────────────────────────────── */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Inter', -apple-system, sans-serif;

  /* ── Layout ───────────────────────────────────────────── */
  --nav-h:          60px;
  --sidebar-w:      228px;
  --r:              10px;
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --max-w:          1120px;

  /* ── Teal-light alias for sidebar badge ─────────────────────── */
  --teal-light:     var(--peacock-light);
}