/*
 * COLOR PALETTES — flaviahug.com
 * ─────────────────────────────────────────────────────────────────────────────
 * Each palette follows the 60 / 30 / 10 rule:
 *   --pal-primary   60%  backgrounds, large surfaces
 *   --pal-secondary 30%  panels, sidebars, nav, headings
 *   --pal-accent    10%  CTAs, links, tags, highlights  ← boldest color
 *
 * Neutral companions (text, muted, borders) are included per palette
 * but are not part of the 3-color identity.
 *
 * To activate a palette, copy its :root block into styles.css and map
 * the variables onto your design tokens.
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ─── PALETTE 1 · Emerald & Ember ───────────────────────────────────────────
   Warm and grounded. Forest green anchors the brand; orange ignites CTAs.
   Good fit: economics, policy, sustainability research.
   ─────────────────────────────────────────────────────────────────────────── */
:root.palette-1 {
  --pal-primary:   #f6f4f0;   /* 60% warm cream        — large backgrounds  */
  --pal-secondary: #006c50;   /* 30% deep emerald      — panels, headings   */
  --pal-accent:    #fb7728;   /* 10% burnt orange      — links, CTAs, tags  */

  /* neutrals */
  --pal-text:      #1e2420;   /* near-black, green-tinted                   */
  --pal-muted:     #6b7b74;   /* mid gray-green for captions, metadata      */
  --pal-border:    rgba(0, 108, 80, 0.12);
  --pal-surface:   rgba(255, 255, 255, 0.75);
}


/* ─── PALETTE 2 · Azure & Citrus ────────────────────────────────────────────
   Crisp and modern. Blue reads as rigorous and analytical; citrus pops.
   Good fit: tech economics, data-driven research, digitalization focus.
   ─────────────────────────────────────────────────────────────────────────── */
:root.palette-2 {
  --pal-primary:   #f6f4f0;   /* 60% warm cream        — large backgrounds  */
  --pal-secondary: #129cde;   /* 30% sky blue          — panels, headings   */
  --pal-accent:    #d6d546;   /* 10% citrus yellow     — links, CTAs, tags  */

  /* neutrals */
  --pal-text:      #111827;   /* near-black                                 */
  --pal-muted:     #6b7d8e;   /* blue-gray for captions, metadata           */
  --pal-border:    rgba(18, 156, 222, 0.12);
  --pal-surface:   rgba(255, 255, 255, 0.75);
}


/* ─── PALETTE 3 · Emerald & Citrus ──────────────────────────────────────────
   Fresh and natural. All-green identity with a lime punch for highlights.
   Good fit: environmental economics, behavioral economics, open science.
   ─────────────────────────────────────────────────────────────────────────── */
:root.palette-3 {
  --pal-primary:   #f6f4f0;   /* 60% warm cream        — large backgrounds  */
  --pal-secondary: #006c50;   /* 30% forest green      — panels, headings   */
  --pal-accent:    #d6d546;   /* 10% lime citrus       — links, CTAs, tags  */

  /* neutrals */
  --pal-text:      #1a2a24;   /* deep green-black                           */
  --pal-muted:     #607068;   /* muted forest for captions, metadata        */
  --pal-border:    rgba(0, 108, 80, 0.12);
  --pal-surface:   rgba(255, 255, 255, 0.75);
}


/* ─── PALETTE 4 · Blush & Sky ───────────────────────────────────────────────
   Soft and refined. Pale pink warms the background; blue adds authority.
   Good fit: social sciences, gender economics, humanities-adjacent work.
   ─────────────────────────────────────────────────────────────────────────── */
:root.palette-4 {
  --pal-primary:   #f6f4f0;   /* 60% warm cream        — large backgrounds  */
  --pal-secondary: #f5d2ec;   /* 30% blush pink        — panels, sidebars   */
  --pal-accent:    #129cde;   /* 10% sky blue          — links, CTAs, tags  */

  /* neutrals */
  --pal-text:      #2a2030;   /* near-black, warm-purple tinted             */
  --pal-muted:     #8a7e90;   /* mauve-gray for captions, metadata          */
  --pal-border:    rgba(245, 210, 236, 0.5);
  --pal-surface:   rgba(255, 255, 255, 0.80);
}


/* ─── PALETTE 5 · Dark Emerald ──────────────────────────────────────────────
   Inverted, bold, distinctive. Green as the dominant brand surface;
   cream text reads clean against it; orange creates sharp focal points.
   Good fit: a dark-mode feel or a site that needs to stand out.
   ─────────────────────────────────────────────────────────────────────────── */
:root.palette-5 {
  --pal-primary:   #006c50;   /* 60% deep emerald      — body background    */
  --pal-secondary: #f6f4f0;   /* 30% warm cream        — text, panels       */
  --pal-accent:    #fb7728;   /* 10% burnt orange      — links, CTAs, tags  */

  /* neutrals */
  --pal-text:      #f6f4f0;   /* cream — readable on dark green             */
  --pal-muted:     #a8c4bc;   /* light sage for captions, metadata          */
  --pal-border:    rgba(246, 244, 240, 0.15);
  --pal-surface:   rgba(0, 60, 42, 0.60);

  /* dark-mode overrides for tokens not covered by palette variables */
  color-scheme:    dark;
  --bg-accent:     #004838;
  --accent-strong: #fb7728;
  --shadow:        0 24px 80px rgba(0, 0, 0, 0.35);
}