/* The palette: cream #F0EFEB, mauve #B294A0, blue-grey #C2CCD6, green #7C8D7D, apricot #D9966E.
   Dark backgrounds (green, mauve) take white text; light ones a near-black, for contrast. Loaded after the
   site's own styles (added to every page by mirror.mjs). */
:root { --cream: #F0EFEB; --mauve: #B294A0; --blue: #C2CCD6; --green: #7C8D7D; --apricot: #D9966E; --ink: #24262a; }
html, body { background: var(--cream) !important; background-image: none !important; color: var(--ink) !important; }

/* Each section a full-width band of its colour. */
main > section, section[id], footer { position: relative; }
section[id]::before, footer::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; }
#home::before { background: var(--green); top: -64px; }
#about::before, #education::before, #skills::before { background: var(--cream); }
#experience::before, #achievements::before { background: var(--blue); }
#projects::before { background: var(--mauve); }
#contact::before { background: var(--apricot); }
footer::before { background: var(--ink); }
section[id] { isolation: isolate; }

/* Text: white on the dark bands, ink on the light ones (the site's own slate/cyan colours replaced). */
section[id] :is(h1, h2, h3, h4, h5, p, li, span, div, a, small, strong, em, dt, dd, time) { color: var(--ink) !important; }
:is(#home, #projects) :is(h1, h2, h3, h4, h5, p, li, span, div, a, small, strong, em, dt, dd, time) { color: #fff !important; }
footer, footer * { color: #fff !important; }
/* Gradient-filled headings become plain text. */
.bg-clip-text, .text-transparent, .h2, :is(h1, h2, h3, h4, h5, h6) { background: none !important; -webkit-text-fill-color: currentColor !important; }
#home h1 { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
section[id] h2 { letter-spacing: .04em; }

/* Cards and panels: light, with a soft edge, on the light bands; translucent white on the dark ones. */
section[id] :is([class*="bg-slate"], [class*="bg-gray"], [class*="bg-zinc"], .card, [class*="rounded-xl"], [class*="rounded-2xl"]) {
  background-color: rgba(255,255,255,.55) !important; border-color: rgba(36,38,42,.14) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
:is(#home, #projects) :is([class*="bg-slate"], [class*="bg-gray"], .card, [class*="rounded-xl"], [class*="rounded-2xl"]) {
  background-color: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.35) !important;
}
section[id] [class*="border-slate"], section[id] [class*="border-gray"] { border-color: rgba(36,38,42,.2) !important; }
:is(#home, #projects) [class*="border-slate"] { border-color: rgba(255,255,255,.55) !important; }
/* The timeline line and dots. */
section[id] [class*="bg-slate-700"] { background-color: rgba(36,38,42,.25) !important; }

/* Buttons: apricot with ink text; the outline one white-edged on the green. */
.btn-primary, a.btn-primary { background: var(--apricot) !important; background-image: none !important; color: var(--ink) !important; border: 0 !important; }
.btn-primary:hover { filter: brightness(1.06); }
#home a.btn:not(.btn-primary) { border-color: #fff !important; color: #fff !important; }
#contact .btn-primary, #contact button { background: var(--ink) !important; color: #fff !important; }
/* Skill chips and tags. */
section[id] :is([class*="rounded-full"]):not(img):not(svg) { background-color: rgba(255,255,255,.6) !important; color: var(--ink) !important; }
:is(#home, #projects) [class*="rounded-full"]:not(img):not([class*="ring"]) { background-color: rgba(255,255,255,.18) !important; color: #fff !important; }
/* The photo's ring. */
#home img { border-color: #fff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.85) !important; }
/* Icons follow the text. */
section[id] svg:not([aria-label="pm logo"]) { color: inherit; }

/* The bar at the top: cream, ink links, the current one underlined in green. */
header.navbar, header.navbar { background: rgba(240,239,235,.96) !important; border-bottom: 1px solid rgba(36,38,42,.1); backdrop-filter: blur(6px); }
header.navbar a, header.navbar button, header.navbar span { color: var(--ink) !important; }
header.navbar a[class*="active"], header.navbar a[aria-current] { color: #4f5f4f !important; border-color: var(--green) !important; }
header.navbar a { background: none !important; -webkit-text-fill-color: currentColor !important; }
header.navbar a::after { background: var(--green) !important; background-image: none !important; }
/* The contact icons (GitHub, LinkedIn…): ink on the light bands, white on the dark ones. */
a:is([href*="github.com"], [href*="linkedin.com"], [href^="mailto:"], [href^="tel:"], [href*="leetcode.com"]), a:is([href*="github.com"], [href*="linkedin.com"], [href^="mailto:"], [href^="tel:"], [href*="leetcode.com"]) svg { color: var(--ink) !important; }
:is(#home, #projects) a:is([href*="github.com"], [href*="linkedin.com"], [href^="mailto:"], [href^="tel:"], [href*="leetcode.com"]), :is(#home, #projects) a:is([href*="github.com"], [href*="linkedin.com"], [href^="mailto:"], [href^="tel:"], [href*="leetcode.com"]) svg { color: #fff !important; }

/* "Pranav" in handwriting instead of the logo. */
header.navbar a[aria-label="Home"] svg { display: none !important; }
header.navbar a[aria-label="Home"]::after {
  content: "Pranav"; font-family: "Great Vibes", "Dancing Script", cursive; font-size: 38px; line-height: 50px;
  color: var(--ink); padding-right: 4px; white-space: nowrap;
}

/* The name in handwriting has no underline bar. */
header.navbar a[aria-label="Home"]::after { background: none !important; position: static !important; height: auto !important; width: auto !important; }
/* Accents (timeline dots, bullets, small icons): green. */
section[id] :is([class*="bg-cyan"], [class*="bg-sky"], [class*="bg-indigo"], [class*="bg-violet"]):not(.btn) { background-color: var(--green) !important; background-image: none !important; }
:is(#home, #projects) :is([class*="bg-cyan"], [class*="bg-sky"], [class*="bg-indigo"]):not(.btn) { background-color: #fff !important; }
/* Apricot buttons keep ink text everywhere (white on apricot is too faint). */
section[id] a.btn-primary, section[id] .btn-primary, :is(#home, #projects) .btn-primary, :is(#home, #projects) a.btn-primary { color: var(--ink) !important; }
/* Timeline dots and other gradient accents. */
section[id] :is([class*="from-cyan"], [class*="from-sky"], [class*="from-indigo"]):not(.btn):not(h1):not(h2):not(h3):not(span):not(a) { background: var(--green) !important; }
/* Pages without sections (each project's own page): ink text on cream, links in green. */
body :is(main, article, div) :is(h1, h2, h3, h4, h5, h6, p, li, span, small, strong, em, dt, dd, time, figcaption, a) { color: var(--ink) !important; }
body :is(main, article) a:not(.btn):not(.btn-primary) { color: #4f5f4f !important; text-decoration-color: var(--green); }
body :is(main, article) [class*="rounded-full"]:not(img) { background-color: rgba(124,141,125,.15) !important; }
/* Timeline dots (small round accents), whatever element they are. */
section[id] [class*="rounded-full"][class*="absolute"]:is([class*="from-"], [class*="bg-cyan"], [class*="bg-sky"], [class*="bg-indigo"], [class*="ring"]) { background: var(--green) !important; box-shadow: 0 0 0 3px rgba(124,141,125,.25) !important; }