/* ==========================================================================
   THEME D — IBM Carbon Design System Blue
   Reference: IBM Carbon Design System (carbondesignsystem.com)
   Primary: #0F62FE (Carbon Blue-60) — 5.0:1 on white ✅ WCAG AA
   Works as both button background (white text) AND inline text on white.
   ========================================================================== */

/* ── Light mode ────────────────────────────────────────────────────────── */
:root {
  --color-accent:        #0f62fe;                  /* Carbon Blue-60 — 5.0:1 on white ✅ */
  --color-accent-hover:  #0043ce;                  /* Carbon Blue-70 — 7.8:1 on white ✅ */
  --color-accent-subtle: rgba(15, 98, 254, 0.08);

  /* Tertiary text fix: #94a3b8 was 2.57:1 → #6b7280 is 4.82:1 ✅ */
  --color-text-tertiary: #6b7280;

  /* Status colours — darkened for light-bg readability */
  --color-success: #15803d;   /* 5.01:1 ✅ */
  --color-error:   #b91c1c;   /* 6.47:1 ✅ */
  --color-warning: #b45309;   /* 5.02:1 ✅ */
}

/* Carbon blue is dark → primary button needs white text */
.btn--primary {
  color: #ffffff;
}

/* Bug fix: ::selection uses --color-accent at full opacity.
   Carbon Blue #0f62fe (L=0.16) is too dark at 100% — use a light tint instead. */
::selection {
  background-color: rgba(15, 98, 254, 0.2);
  color: var(--color-bg-dark);
}


/* Footer is always dark-bg — override accent hover to stay light-readable in light mode */
/* Footer is always dark-bg — use light blue (#78a9ff) in both light and dark modes */
.footer__link:hover,
.footer__bottom a:hover {
  color: #78a9ff !important;
}
.footer__social-link:hover {
  color: #78a9ff !important;
  border-color: rgba(120, 169, 255, 0.4) !important;
  background-color: rgba(120, 169, 255, 0.08) !important;
}

/* Card overlay pill — semi-transparent white so it floats over the image */
.card:hover .card__overlay-text {
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid #0f62fe;
  color: #0f62fe;
  box-shadow: 0 2px 12px rgba(15, 98, 254, 0.15);
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Carbon Blue-40 — lighter so it reads on dark surfaces */
  --color-accent:        #78a9ff;   /* Carbon Blue-40 — 8.0:1 on dark bg ✅ */
  --color-accent-hover:  #a6c8ff;   /* Carbon Blue-30 */
  --color-accent-subtle: rgba(120, 169, 255, 0.1);

  --color-text-tertiary: #64748b;
  --color-success:       #22c55e;
  --color-error:         #ef4444;
  --color-warning:       #f59e0b;
}

/* Dark mode: lighter blue → switch back to dark text on buttons */
[data-theme="dark"] .btn--primary {
  color: #0f172a;
}

/* Dark mode card overlay pill */
[data-theme="dark"] .card:hover .card__overlay-text {
  background-color: rgba(120, 169, 255, 0.15);
  border-color: #78a9ff;
}

/* Dark mode selection — use lighter Carbon Blue-40 at higher opacity
   so it's visible against the dark background                        */
[data-theme="dark"] ::selection {
  background-color: rgba(120, 169, 255, 0.25);
  color: #ffffff;
}