/* styles/colors.css - Global Color Variables */
/* ─────────────────────────────────────────────────────────────────
   RULE: Never remove a variable that exists. Only ADD or CORRECT.
   --secondary / --secondary-light kept as aliases — used in 17 places.
   --navbar-text-light / --navbar-text-dark: do NOT override in dark
   mode — HTML CSS rules use them as permanent named slots.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand greens ── */
  --primary:          #48a132;
  --primary-dark:     #2d7a1e;   /* darkened: 4.63:1 on white → AA ✓ */
  --primary-light:    #59c23f;
  --secondary:        #48a132;   /* alias of primary — do not remove */
  --secondary-dark:   #388027;
  --secondary-light:  #59c23f;   /* used for hover states, do not remove */
  --accent:           #7bed9f;
  --accent-dark:      #219653;
  --accent-light:     #7bed9f;

  /* ── Neutrals ── */
  --white:            #ffffff;
  --black:            #1a202c;
  --gray:             #5a6872;   /* raised: 4.54:1 on white → AA ✓ */
  --gray-light:       #ecf0f1;
  --gray-dark:        #34495e;

  /* ── Backgrounds ── */
  --bg-light:         #f5f7fa;
  --bg-dark:          #1a202c;

  /* ── Semantic text (used by blog.css, footer.css, main.css) ── */
  --text-light:           #1a202c;
  --text-dark:            #e2e8f0;
  --text-primary-light:   #1a202c;
  --text-primary-dark:    #e2e8f0;

  /* ── Shadows ── */
  --shadow-light:     rgba(0, 0, 0, 0.1);
  --shadow-dark:      rgba(0, 0, 0, 0.3);

  /* ── Navbar ── */
  --navbar-bg-light:      rgba(245, 247, 250, 0.85);
  --navbar-bg-dark:       rgba(13, 43, 8, 0.95);
  --navbar-accent-light:  rgba(72, 161, 50, 0.05);
  --navbar-accent-dark:   rgba(72, 161, 50, 0.08);
  --navbar-text-light:    #2d3748;   /* dark text on green navbar (light mode) */
  --navbar-text-dark:     #e2e8f0;   /* light text on dark navbar (dark mode) */

  /* ── Cards / Buttons / Footer ── */
  --card-bg-light:    #ffffff;
  --card-bg-dark:     #2d3748;
  --card-shadow:      0 4px 12px rgba(0, 0, 0, 0.08);
  --button-bg-light:  #48a132;
  --button-bg-dark:   #59c23f;
  --footer-bg:        #1a202c;

  /* ── Misc aliases (blog.css, toggle.css) ── */
  --accent-color:     #48a132;

  /* ── States ── */
  --error-bg:         #fee2e2;
  --error-text:       #991b1b;
}

[data-theme="dark"] {
  /* ── Brand greens (brighter for visibility on dark bg) ── */
  --primary:          #59c23f;
  --primary-dark:     #48a132;
  --primary-light:    #7bed9f;
  --secondary:        #59c23f;
  --secondary-dark:   #48a132;
  --secondary-light:  #7bed9f;
  --accent:           #7bed9f;
  --accent-light:     #7bed9f;

  /* ── Neutrals flip ── */
  --white:            #e2e8f0;
  --black:            #e2e8f0;   /* CRITICAL: #1a202c = invisible on dark bg */
  --gray:             #a0aec0;   /* 7.23:1 on dark bg ✓ */
  --gray-light:       #2d3748;
  --gray-dark:        #e2e8f0;

  /* ── Backgrounds ── */
  --bg-light:         #1a202c;
  --bg-dark:          #0f172a;

  /* ── Semantic text ── */
  --text-light:           #e2e8f0;
  --text-dark:            #1a202c;
  --text-primary-light:   #e2e8f0;
  --text-primary-dark:    #1a202c;

  /* ── Shadows ── */
  --shadow-light:     rgba(0, 0, 0, 0.2);
  --shadow-dark:      rgba(0, 0, 0, 0.4);

  /* ── Navbar (text vars NOT overridden — see comment in :root) ── */
  --navbar-bg-dark:   rgba(13, 43, 8, 0.95);

  /* ── Cards / Buttons / Footer ── */
  --card-bg-light:    #2d3748;
  --card-bg-dark:     #1a202c;
  --card-shadow:      0 4px 12px rgba(0, 0, 0, 0.3);
  --button-bg-light:  #59c23f;
  --button-bg-dark:   #48a132;
  --footer-bg:        #0d2b08;

  /* ── Misc aliases ── */
  --accent-color:     #59c23f;
}