/* ===========================
   assets/css/theme.css
   Theme tokens + light/dark styles
   =========================== */

/* Theme tokens */
:root {
  --accent: #f9004d;

  --text: #111;
  --text-muted: #444;

  --bg: #ffffff;
  --bg-soft: #f6f6f6;
  --card: #ffffff;

  --border: rgba(0,0,0,0.1);
  --shadow: rgba(0,0,0,0.08);

  /* Keep compatibility with existing vars */
  --main-color: var(--accent);
  --main-color2: var(--text-muted);

  /* Hero overlay tokens (dark is default look) */
  --overlay-start: rgba(0,0,0,0.85);
  --overlay-mid:   rgba(0,0,0,0.55);
  --overlay-end:   rgba(0,0,0,0.85);

  /* Text shadow intents */
  --hero-shadow: rgba(0,0,0,0.7);
  --hero-shadow-soft: rgba(255,255,255,0.8);
}

/* Dark theme */
:root[data-theme="dark"] {
  --accent: #f9004d;

  --text: #ffffff;
  --text-muted: #fcfc;

  --bg: #000000;
  --bg-soft: #191919;
  --card: #191919;

  --border: rgba(255,255,255,0.09);
  --shadow: rgba(0,0,0,0.35);

  /* Keep image moody in dark */
  :root[data-theme="dark"] {
  --overlay-start: rgba(0,0,0,0.65);
  --overlay-mid:   rgba(0,0,0,0.35);
  --overlay-end:   rgba(0,0,0,0.65);
}


  --hero-shadow: rgba(0,0,0,0.85);
  --hero-shadow-soft: rgba(255,255,255,0.35);
}

/* Light theme */
:root[data-theme="light"] {
  --text: #0d0d0d;
  --text-muted: #555;

  --bg: #ffffff;
  --bg-soft: #f6f6f6;
  --card: #ffffff;

  --border: rgba(0,0,0,0.1);
  --shadow: rgba(0,0,0,0.08);

  /* Brighten the hero in light so dark text works */
:root[data-theme="light"] {
  --overlay-start: rgba(255,255,255,0.55);
  --overlay-mid:   rgba(255,255,255,0.25);
  --overlay-end:   rgba(255,255,255,0.55);
}

  --hero-shadow: rgba(0,0,0,0.35);
  --hero-shadow-soft: rgba(255,255,255,0.9);
}

/* Base */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Header */
header .contener .logo { color: var(--text) !important; }
header .contener nav ul li a { color: var(--text) !important; }
header .contener nav ul li a:hover { color: var(--accent) !important; }
header .contener .btn a {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
header .contener .btn a:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* Theme toggle button */
#themeToggle {
  margin-left: 10px;
  appearance: none;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
#themeToggle:hover { transform: scale(1.06); }

/* Landing */
.landing { color: var(--text) !important; }

/* Give hero text a subtle theme-aware shadow for readability */
.landing .contener .info {
  text-shadow: 0 0 8px var(--hero-shadow);
}
:root[data-theme="light"] .landing .contener .info {
  text-shadow: 0 0 6px var(--hero-shadow-soft);
}

/* CTA buttons */
.landing .info a {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.landing .info a:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* About */
.about {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}
.about .content .text p { color: var(--text-muted) !important; }
.about .content .text a {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.about .content .text a:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* Courses (services) */
.services { background-color: var(--bg) !important; color: var(--text) !important; }
.services .title { color: var(--text) !important; }
.services .srv-box .card {
  background-color: var(--card) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px var(--shadow) !important;
  border: 1px solid var(--border) !important;
}
.services .srv-box .card i { color: var(--accent) !important; }
.services .srv-box .card p { color: var(--text-muted) !important; }
.services .srv-box .card a {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.services .srv-box .card a:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* Projects (skills) */
.skills { background-color: var(--bg-soft) !important; color: var(--text) !important; }
.skills a {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.skills a:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* Footer */
footer { background-color: var(--bg) !important; color: var(--text) !important; }
footer .contener p { color: var(--text-muted) !important; }
footer .contener .links i {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
footer .contener .links i:hover {
  background-color: transparent !important;
  color: var(--text) !important;
}