/* ═══════════════════════════════════════════════════════════════════════
   joy-palette-extended.css — Yousef directive 2026-06-10
   Expanded palette: 24 joyful light shades across 8 hue families.
   All HSL-tuned for harmony and warmth. Loaded BEFORE joy-bright.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     CREAM / IVORY FAMILY (warm neutrals — backgrounds, paper)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-cream-100: #FFFEFB;   /* almost-white, brightest */
  --jp-cream-200: #FDFBF5;   /* default page bg */
  --jp-cream-300: #FBF6E9;   /* warm paper */
  --jp-cream-400: #F7EFD6;   /* deeper cream */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     GOLD FAMILY (brand identity — cross + accents)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-gold-100: #FFF6DC;
  --jp-gold-200: #F4D77A;   /* light gold-cream */
  --jp-gold-300: #E8C067;   /* warm gold */
  --jp-gold-400: #D4A843;   /* CROSS GOLD — brand identity */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     PEACH / SUNRISE FAMILY (joy + warmth)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-peach-100: #FFEDDD;
  --jp-peach-200: #FFD4B8;
  --jp-peach-300: #FFBA92;
  --jp-coral:     #F4A78B;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     ROSE / LOVE FAMILY (gentle warmth — love)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-rose-100: #FBE5E7;
  --jp-rose-200: #F8BDC3;
  --jp-rose-300: #F09BA1;
  --jp-rose-400: #DB7A82;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SKY FAMILY (hope + heaven)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-sky-100: #EEF5FB;
  --jp-sky-200: #DEEAF6;
  --jp-sky-300: #BDD9F2;
  --jp-sky-400: #92BFE6;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SAGE FAMILY (life + growth)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-sage-100: #EAF1DD;
  --jp-sage-200: #C8DCB0;
  --jp-sage-300: #A8C385;
  --jp-sage-400: #87A862;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     LAVENDER FAMILY (mystery + grace)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-lav-100: #EFEAF7;
  --jp-lav-200: #D4C9E8;
  --jp-lav-300: #B6A4D6;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     BUTTER / MINT (joyful accents)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-butter:    #FFF1A8;
  --jp-mint-100:  #DFF5E8;
  --jp-mint-200:  #B5E4CA;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     INK FAMILY (text — never deep navy, always warm gray-blue)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --jp-ink:       #2A2D38;
  --jp-ink-soft:  #5A6173;
  --jp-ink-muted: #8B91A1;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SEMANTIC GRADIENT TOKENS (re-usable backgrounds)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --grad-dawn:    linear-gradient(135deg, var(--jp-rose-100) 0%, var(--jp-peach-200) 50%, var(--jp-gold-100) 100%);
  --grad-noon:    linear-gradient(180deg, var(--jp-sky-200) 0%, var(--jp-cream-200) 100%);
  --grad-sunset:  linear-gradient(135deg, var(--jp-gold-100) 0%, var(--jp-coral) 60%, var(--jp-rose-300) 100%);
  --grad-meadow:  linear-gradient(135deg, var(--jp-sage-100) 0%, var(--jp-mint-100) 60%, var(--jp-sky-200) 100%);
  --grad-grace:   linear-gradient(135deg, var(--jp-lav-100) 0%, var(--jp-sky-200) 50%, var(--jp-cream-200) 100%);
  --grad-joy:     linear-gradient(135deg, var(--jp-peach-100) 0%, var(--jp-rose-100) 30%, var(--jp-sky-200) 70%, var(--jp-mint-100) 100%);
  --grad-spectrum: linear-gradient(90deg,
                     var(--jp-gold-300) 0%,
                     var(--jp-coral) 20%,
                     var(--jp-rose-300) 40%,
                     var(--jp-lav-300) 60%,
                     var(--jp-sky-400) 80%,
                     var(--jp-mint-200) 100%);

  /* Soft shadows */
  --shadow-warm:    0 4px 16px rgba(244, 167, 139, 0.22);
  --shadow-warm-lg: 0 12px 36px rgba(244, 167, 139, 0.30);
  --shadow-sky:     0 4px 16px rgba(146, 191, 230, 0.22);
  --shadow-gold:    0 4px 16px rgba(212, 168, 67, 0.28);
}