/* THEME TOKENS
   Light/Dark palettes via body class: .theme-light / .theme-dark
   Keep colors high-contrast para readable yung “Features” & “Services”
*/

/* Light theme (default) */

body.theme-light {
  --bg: #ffffff;
  --text: #111827;          /* slate-900 */
  --muted: #6b7280;         /* slate-500 */
  --accent: #ef4444;        /* red-500 */
  --accent-hover: #dc2626;  /* red-600 */
  --accent-contrast: #ffffff;

  --nav-surface: #ffffff;
  --footer-surface: #0b0f14;        /* dark footer for punchy contrast */
  --footer-text: #cbd5e1;

  --surface: #f8fafc;       /* section bg 1 */
  --surface-2: #f1f5f9;     /* section bg 2 */

  --card: #ffffff;
  --card-border: #e5e7eb;
  --disc-bg: #fee2e2;       /* soft red tint for icons */
  --hero-overlay: rgba(0,0,0,.35);
}

/* Dark theme */
body.theme-dark {
  --bg: #0b0f14;            /* near-black but not pure */
  --text: #e5e7eb;          /* slate-200 */
  --muted: #9ca3af;         /* slate-400 */
  --accent: #ef4444;        /* red-500 stays brand */
  --accent-hover: #f87171;  /* red-400 for hover on dark */
  --accent-contrast: #0b0f14;

  --nav-surface: #0f1620;
  --footer-surface: #0f1620;
  --footer-text: #94a3b8;

  --surface: #0c131b;       /* section bg 1 */
  --surface-2: #0a1017;     /* section bg 2 */

  --card: #111827;          /* slate-900-ish */
  --card-border: #1f2937;   /* slate-800 */
  --disc-bg: #1f2937;
  --hero-overlay: rgba(0,0,0,.55);
}

/* smooth theme transitions */
*,
*::before,
*::after {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}