/* =====================================================================
   Neumorphic (soft UI) theme
   Loaded after styles.css. Remove its <link> in index.html to go back.
   Selectors are prefixed with html[data-theme] so they win over the
   older light/dark rules without !important.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --neu-bg: #e8e5f2;
  --neu-hi: #ffffff;
  --neu-lo: #c4bcdc;
  --neu-text: #2a2342;
  --neu-muted: #5e5778;
  --neu-glass: rgba(232, 229, 242, .82);
  --neu-accent: #6d28d9;
}
[data-theme="dark"] {
  --neu-bg: #221e33;
  --neu-hi: rgba(255, 255, 255, .06);
  --neu-lo: rgba(0, 0, 0, .55);
  --neu-text: #ece8f8;
  --neu-muted: #b2a9d2;
  --neu-glass: rgba(34, 30, 51, .84);
  --neu-accent: #c4a1ff;
}
html[data-theme] {
  --neu-raise: 9px 9px 20px var(--neu-lo), -9px -9px 20px var(--neu-hi);
  --neu-raise-sm: 5px 5px 12px var(--neu-lo), -5px -5px 12px var(--neu-hi);
  --neu-raise-xs: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi);
  --neu-inset: inset 5px 5px 11px var(--neu-lo), inset -5px -5px 11px var(--neu-hi);
  --neu-inset-sm: inset 3px 3px 6px var(--neu-lo), inset -3px -3px 6px var(--neu-hi);
  --lav: var(--neu-bg);
  --violet-soft: var(--neu-bg);
  --surface: var(--neu-bg);
  --surface-2: var(--neu-bg);
  --notch-bg: var(--neu-bg);
  --shadow: var(--neu-raise);
}

/* ---------- One continuous soft surface ---------- */
html[data-theme] body,
html[data-theme] .section, html[data-theme] .section--lav, html[data-theme] .section--white,
html[data-theme] .section--dark, html[data-theme] .section--glow,
html[data-theme] .hero, html[data-theme] .band, html[data-theme] .footer { background: var(--neu-bg); }
html[data-theme] .footer { border-top: 0; }
html[data-theme] .band { border-block: 0; box-shadow: var(--neu-inset-sm); }

/* ---------- Raised surfaces ---------- */
html[data-theme] .panel,
html[data-theme] .pcard,
html[data-theme] .modal__dialog,
html[data-theme] .lang__menu { background: var(--neu-bg); border: 0; box-shadow: var(--neu-raise); }
html[data-theme] .xp__card:not(.xp__item--final .xp__card),
html[data-theme] .resume-link,
html[data-theme] .skill-row,
html[data-theme] .why__card { background: var(--neu-bg); border: 0; box-shadow: var(--neu-raise-sm); }
html[data-theme] .xp__card:hover, html[data-theme] .resume-link:hover,
html[data-theme] .skill-row:hover, html[data-theme] .why__card:hover { box-shadow: var(--neu-raise); }

/* coloured accent cards keep their colours, gain soft depth */
html[data-theme] .photo-card, html[data-theme] .tile, html[data-theme] .feature,
html[data-theme] .cert, html[data-theme] .ccard, html[data-theme] .cta,
html[data-theme] .xp__item--final .xp__card { box-shadow: var(--neu-raise-sm); border: 0; }
html[data-theme] .tile.tile--portrait { border: 0; box-shadow: var(--neu-raise-sm); }

/* ---------- Pressed-in (inset) elements ---------- */
html[data-theme] .chip--soft,
html[data-theme] .status,
html[data-theme] .step__tag,
html[data-theme] .pbar,
html[data-theme] .seg { background: var(--neu-bg); border: 0; box-shadow: var(--neu-inset-sm); }
html[data-theme] .chip--soft, html[data-theme] .step__tag { color: var(--neu-accent); }
html[data-theme] .status { color: var(--neu-text); }
html[data-theme] .pbar { height: 8px; border-radius: 8px; }
html[data-theme] .pbar span { border-radius: 8px; }

/* ---------- Soft buttons, chips & controls ---------- */
html[data-theme] .chip,
html[data-theme] .filter,
html[data-theme] .nav-btn,
html[data-theme] .nav-btn--light,
html[data-theme] .mini-chip,
html[data-theme] .earlier__list span,
html[data-theme] .certs-more span,
html[data-theme] .roles__list span,
html[data-theme] .pcard__ico,
html[data-theme] .circle-btn,
html[data-theme] .social,
html[data-theme] .lang__btn,
html[data-theme] .theme-toggle,
html[data-theme] .nav__toggle,
html[data-theme] .modal__close {
  background: var(--neu-bg); color: var(--neu-text); border: 0; box-shadow: var(--neu-raise-xs);
  transition: box-shadow .2s ease, transform .2s ease, color .2s ease;
}
html[data-theme] .chip { box-shadow: var(--neu-raise-xs); }
html[data-theme] .roles__list span { color: var(--neu-accent); }
html[data-theme] .pcard__ico { color: var(--neu-accent); }
html[data-theme] .pcard--doc .pcard__ico { background: var(--yellow); color: var(--ink); }
html[data-theme] .earlier__list span, html[data-theme] .certs-more span { color: var(--neu-text); }
html[data-theme] .earlier__list em, html[data-theme] .certs-more span { color: var(--neu-muted); }
html[data-theme] .certs-more b { color: var(--neu-text); }

/* hover lifts, press sinks */
html[data-theme] .filter:hover, html[data-theme] .nav-btn:hover, html[data-theme] .mini-chip:hover,
html[data-theme] .circle-btn:hover, html[data-theme] .social:hover, html[data-theme] .lang__btn:hover,
html[data-theme] .theme-toggle:hover, html[data-theme] .nav__toggle:hover {
  background: var(--neu-bg); color: var(--neu-accent); box-shadow: var(--neu-raise-sm); border: 0;
}
html[data-theme] .filter:active, html[data-theme] .nav-btn:active, html[data-theme] .mini-chip:active,
html[data-theme] .circle-btn:active, html[data-theme] .social:active, html[data-theme] .btn:active,
html[data-theme] .theme-toggle:active, html[data-theme] .nav__toggle:active, html[data-theme] .lang__btn:active {
  box-shadow: var(--neu-inset-sm); transform: none;
}
/* the active filter stays pressed in */
html[data-theme] .filter.active { background: var(--neu-bg); color: var(--neu-accent); box-shadow: var(--neu-inset-sm); }
html[data-theme] .circle-btn:hover { transform: rotate(45deg); }
html[data-theme] .social--mail:hover { color: #b45309; }
html[data-theme] .social--wa:hover { color: #16a34a; }
html[data-theme] .social--in:hover { color: #0a66c2; }

/* buttons */
html[data-theme] .btn--dark,
html[data-theme] .btn--line,
html[data-theme] .btn--ghost { background: var(--neu-bg); color: var(--neu-text); border: 0; box-shadow: var(--neu-raise-sm); }
html[data-theme] .btn--dark:hover, html[data-theme] .btn--line:hover, html[data-theme] .btn--ghost:hover { background: var(--neu-bg); color: var(--neu-accent); box-shadow: var(--neu-raise); }
html[data-theme] .btn--yellow { box-shadow: var(--neu-raise-sm); }
html[data-theme] .btn--yellow:hover { box-shadow: var(--neu-raise); }
html[data-theme] .ccard--yellow .btn--dark { background: var(--ink); color: #fff; box-shadow: 4px 4px 10px rgba(120, 90, 0, .35), -3px -3px 8px rgba(255, 255, 255, .45); }
html[data-theme] .ccard--yellow .btn--line { background: transparent; color: var(--ink); box-shadow: inset 2px 2px 5px rgba(120, 90, 0, .3), inset -2px -2px 5px rgba(255, 255, 255, .5); }
html[data-theme] .cta .btn--outline, html[data-theme] .ccard--purple .btn--outline { box-shadow: none; }

/* ---------- Floating header (soft raised bar) ---------- */
html[data-theme] .nav.hbar,
html[data-theme] .hdr.scrolled .hbar {
  background: var(--neu-glass); border: 0; box-shadow: var(--neu-raise-sm);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--neu-text);
}
html[data-theme] .hdr.hdr--peek .hbar { background: var(--neu-glass); opacity: .72; box-shadow: var(--neu-raise-xs); }
html[data-theme] .brand__text, html[data-theme] .brand__text small { color: var(--neu-text); }
html[data-theme] .brand__logo { box-shadow: var(--neu-raise-xs); border: 0; }
@media (min-width: 1181px) {
  html[data-theme] .nav__links { background: var(--neu-bg); border: 0; box-shadow: var(--neu-inset-sm); }
  html[data-theme] .nav__links > a,
  html[data-theme] .hdr.scrolled .nav__links > a:not(.active),
  html[data-theme] .nav__links > a.active { color: var(--neu-muted); }
  html[data-theme] .nav__pill { background: var(--neu-bg); box-shadow: var(--neu-raise-xs); }
  html[data-theme] .hdr .nav.hbar .nav__links > a.is-pill { color: var(--neu-accent); }
}
html[data-theme] .nav__actions .btn--ghost { box-shadow: var(--neu-raise-xs); }
html[data-theme] .nav__toggle span { background: var(--neu-text); }
html[data-theme] .nav__toggle[aria-expanded="true"] { background: var(--yellow); box-shadow: var(--neu-inset-sm); }
html[data-theme] .nav__toggle[aria-expanded="true"] span { background: var(--ink); }
html[data-theme] .theme-toggle .ico-moon { color: var(--neu-accent); }
html[data-theme="dark"] .theme-toggle .ico-sun { color: var(--yellow); }

/* expanding menu panel */
@media (max-width: 1180px) {
  html[data-theme] .hdr .nav.hbar .nav__links { background: var(--neu-bg); border: 0; box-shadow: var(--neu-raise); }
  html[data-theme] .nav__links > a, html[data-theme] .hdr.scrolled .nav__links > a:not(.active) { color: var(--neu-text); }
  html[data-theme] .nav__links > a::before { color: var(--neu-accent); }
  html[data-theme] .nav__links > a::after { color: var(--neu-muted); }
  html[data-theme] .hdr .nav__links > a.active { background: var(--neu-bg); color: var(--neu-accent); box-shadow: var(--neu-inset-sm); }
  html[data-theme] .nav__links > a.active::before, html[data-theme] .nav__links > a.active::after { color: var(--neu-accent); }
  html[data-theme] .nav__links > a:hover { background: var(--neu-bg); box-shadow: var(--neu-raise-xs); }
  html[data-theme] .menu-extras, html[data-theme] .menu-prefs { border-color: rgba(120, 100, 170, .18); }
  html[data-theme] .seg button { color: var(--neu-muted); }
  html[data-theme] .seg button[aria-checked="true"] { background: var(--yellow); color: var(--ink); box-shadow: var(--neu-raise-xs); }
  html[data-theme] .seg__ico { color: var(--neu-accent); }
  html[data-theme] .nav__links .menu-extras .btn--ghost { color: var(--neu-text); }
  html[data-theme] .menu-scrim { background: rgba(80, 66, 130, .25); }
}

/* ---------- Light theme: former dark areas now read dark-on-soft ---------- */
html[data-theme="light"] .ticker { background: var(--neu-bg); color: var(--neu-accent); box-shadow: var(--neu-inset-sm); }
html[data-theme="light"] .ticker__track span:nth-child(even) { color: var(--yellow); text-shadow: 0 0 1px rgba(120, 90, 0, .6); }

/* hero */
html[data-theme="light"] .hero, html[data-theme="light"] .hero__title, html[data-theme="light"] .hero__title-2,
html[data-theme="light"] .hero__sub { color: var(--neu-text); }
html[data-theme="light"] .hero__sub .sw { color: var(--neu-accent); }
html[data-theme="light"] .hero__lead { color: var(--neu-muted); }
html[data-theme="light"] .hero__lead strong, html[data-theme="light"] .hero__stats b { color: var(--neu-text); }
html[data-theme="light"] .hero__stats { color: var(--neu-muted); }
html[data-theme="light"] .badge { background: var(--neu-bg); color: var(--neu-text); border: 0; box-shadow: var(--neu-raise-xs); }
html[data-theme="light"] .hchip { background: var(--neu-bg); color: var(--neu-text); border: 0; box-shadow: var(--neu-raise-sm); }
html[data-theme="light"] .bl1 { background: radial-gradient(circle at center, rgba(124, 58, 237, .16), rgba(124, 58, 237, 0) 68%); }
html[data-theme="light"] .bl2 { background: radial-gradient(circle at center, rgba(168, 85, 247, .14), rgba(168, 85, 247, 0) 68%); }
html[data-theme="light"] .bl3 { background: radial-gradient(circle at center, rgba(253, 224, 71, .22), rgba(253, 224, 71, 0) 68%); }
html[data-theme="light"] .ring1 { border-color: rgba(109, 40, 217, .16); }
html[data-theme="light"] .ring2 { border-color: rgba(109, 40, 217, .08); }
html[data-theme="light"] .floor::before { background-image: linear-gradient(rgba(109, 40, 217, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 40, 217, .1) 1px, transparent 1px); }
@media (max-width: 640px) {
  html[data-theme] .hero__stats li { background: var(--neu-bg); border: 0; box-shadow: var(--neu-raise-xs); }
}

/* marquee band */
html[data-theme="light"] .band__track { color: var(--neu-text); }
html[data-theme="light"] .band .outline { -webkit-text-stroke-color: rgba(109, 40, 217, .45); }
html[data-theme="light"] .band .star { color: var(--neu-accent); }

/* skills (formerly dark) */
html[data-theme="light"] .section--dark .h2--light, html[data-theme="light"] .section--glow .h2--light,
html[data-theme="light"] .skill-row h4, html[data-theme="light"] .why__card h4 { color: var(--neu-text); }
html[data-theme="light"] .eyebrow--light { color: var(--neu-accent); }
html[data-theme="light"] .muted--light, html[data-theme="light"] .skill-row p, html[data-theme="light"] .why__card p { color: var(--neu-muted); }
html[data-theme="light"] #skills .yellow { color: var(--neu-accent); }
html[data-theme="light"] .why__num { -webkit-text-stroke-color: rgba(109, 40, 217, .35); }

/* footer */
html[data-theme="light"] .footer .brand { color: var(--neu-text); }
html[data-theme="light"] .footer__nav a { color: var(--neu-muted); }
html[data-theme="light"] .footer__nav a:hover { color: var(--neu-accent); }
html[data-theme="light"] .footer__bottom { color: var(--neu-muted); border-top-color: rgba(120, 100, 170, .18); }
html[data-theme] .footer__end .nav-btn { background: var(--neu-bg); color: var(--neu-text); box-shadow: var(--neu-raise-xs); }

/* ---------- Dark theme refinements ---------- */
html[data-theme="dark"] .ticker { background: var(--neu-bg); color: var(--yellow); box-shadow: var(--neu-inset-sm); }
html[data-theme="dark"] .hero { background: radial-gradient(120% 80% at 50% 0%, #2c2547 0%, var(--neu-bg) 62%); }
html[data-theme="dark"] .hchip, html[data-theme="dark"] .badge { background: var(--neu-bg); border: 0; box-shadow: var(--neu-raise-sm); }
html[data-theme="dark"] .footer__bottom { border-top-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .xp__item--final .xp__card { background: linear-gradient(135deg, #3b1d8a, #1d1339); }

/* ---------- Reduced motion: keep the press feedback instant ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .filter, html[data-theme] .btn, html[data-theme] .social { transition: none; }
}

/* Education highlight keeps its yellow tag on the dark card */
html[data-theme] .xp__item--final .step__tag { background: var(--yellow); color: var(--ink); box-shadow: none; }

/* decorative ticker stars: readable on the soft surface */
html[data-theme="light"] .ticker__track span:nth-child(even) { color: var(--neu-accent); text-shadow: none; }