body.charcoal-mode .coin-front {
opacity: 0;
animation: none;
}

body.charcoal-mode .coin-back {
opacity: 1;
transform: scale(1);
animation: none;
}

body.charcoal-mode .tool-tags span {
background: rgba(205, 180, 120, 0.11);
border-color: rgba(205, 180, 120, 0.25);
color: #eee5d1;
}

body.charcoal-mode {
  --theme-menu-bg: rgba(17, 17, 15, 0.94);
  --theme-menu-hover: rgba(205, 180, 120, 0.10);
  --theme-menu-active: rgba(205, 180, 120, 0.16);
}

body.charcoal-mode .coin-back {
background: var(--profile-photo) var(--profile-photo-position) / cover no-repeat;
}

body.charcoal-mode {
--bg: #11110f;
--card: rgba(31, 31, 28, 0.76);
--blue: #cdb478;
--cyan: #eee5d1;
--text: #f7f2e8;
--muted: #b9b2a4;
--border: rgba(238, 229, 209, 0.16);
--particle: rgba(238, 229, 209, 0.54);
--particle-line: 205, 180, 120;
--particle-mouse: rgba(205, 180, 120, 0.28);
--profile-photo: url("/assets/img/foto-for-charcoal-studio.jpeg");
--profile-photo-position: center center;
}

body.charcoal-mode {
background:
radial-gradient(circle at 15% 12%, rgba(205, 180, 120, 0.10), transparent 28%),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(180deg, #171714 0%, #0d0d0c 100%);
background-size: auto, 34px 100%, auto;
}

body.charcoal-mode::before {
content: "";
position: fixed;
inset: 0;
z-index: -4;
pointer-events: none;
background:
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
radial-gradient(circle at 70% 25%, rgba(238, 229, 209, 0.08), transparent 30%),
radial-gradient(circle at 20% 90%, rgba(30, 48, 43, 0.42), transparent 34%);
background-size: 18px 100%, auto, auto;
opacity: 0.72;
}

body.charcoal-mode header {
background: rgba(17, 17, 15, 0.78);
border-bottom-color: rgba(238, 229, 209, 0.14);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
}

body.charcoal-mode .logo,
body.charcoal-mode .hero h1,
body.charcoal-mode .title h2,
body.charcoal-mode .card h3 {
color: #f8f2e7;
}

body.charcoal-mode .logo span,
body.charcoal-mode nav a:hover,
body.charcoal-mode .title span,
body.charcoal-mode .card i,
body.charcoal-mode .project-img i,
body.charcoal-mode .tools-source i,
body.charcoal-mode .tools-source a {
color: #cdb478;
}

body.charcoal-mode nav a,
body.charcoal-mode .hero h2,
body.charcoal-mode .hero p,
body.charcoal-mode .card p,
body.charcoal-mode .about-text p,
body.charcoal-mode .contact-box p,
body.charcoal-mode .tools-intro,
body.charcoal-mode .tools-source {
color: #b9b2a4;
}

body.charcoal-mode .hero {
isolation: isolate;
}

body.charcoal-mode .hero::before {
content: "";
position: absolute;
inset: 102px 5% 42px;
z-index: -1;
border: 1px solid rgba(238, 229, 209, 0.08);
background:
linear-gradient(90deg, transparent 0 49%, rgba(238, 229, 209, 0.06) 50%, transparent 51%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0));
pointer-events: none;
}

body.charcoal-mode .hero h1 span {
background: linear-gradient(90deg, #f8f2e7, #cdb478 54%, #92a090);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.charcoal-mode .badge {
background: rgba(238, 229, 209, 0.07);
border-color: rgba(205, 180, 120, 0.25);
color: #d7c99e;
}

body.charcoal-mode .btn {
border-radius: 10px;
color: #f8f2e7;
background: rgba(238, 229, 209, 0.055);
border-color: rgba(238, 229, 209, 0.17);
box-shadow: none;
}

body.charcoal-mode .btn.primary {
color: #15130e;
background: linear-gradient(135deg, #eee5d1, #cdb478);
box-shadow: 0 16px 42px rgba(205, 180, 120, 0.18);
}

body.charcoal-mode .btn:hover {
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
border-color: rgba(205, 180, 120, 0.35);
}

body.charcoal-mode .hero-card,
body.charcoal-mode .card,
body.charcoal-mode .contact-box,
body.charcoal-mode .tools-source {
background: rgba(31, 31, 28, 0.74);
border-color: rgba(238, 229, 209, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.045),
0 24px 70px rgba(0, 0, 0, 0.26);
backdrop-filter: blur(12px);
}

body.charcoal-mode .hero-card {
border-radius: 20px;
background:
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(145deg, rgba(42, 42, 38, 0.86), rgba(15, 15, 14, 0.72));
background-size: 18px 100%, auto;
animation: none;
}

body.charcoal-mode .hero-card::before {
inset: 16px;
border-radius: 14px;
border-color: rgba(205, 180, 120, 0.18);
}

body.charcoal-mode .hero-card::after {
width: 160px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(238, 229, 209, 0.06), transparent);
transform: rotate(0deg);
animation: premiumScan 7s ease-in-out infinite;
}

body.charcoal-mode .profile-frame {
width: 286px;
height: 286px;
border-radius: 18px;
padding: 6px;
background: linear-gradient(135deg, #eee5d1, #7d765f 52%, #1e2f2b);
box-shadow:
0 18px 55px rgba(0, 0, 0, 0.34),
0 0 0 1px rgba(238, 229, 209, 0.10);
animation: none;
}

body.charcoal-mode .profile-frame::before {
inset: -13px;
border-radius: 24px;
border-color: rgba(205, 180, 120, 0.18);
animation: softPulse 4.5s ease-in-out infinite;
}

body.charcoal-mode .avatar,
body.charcoal-mode .coin-face {
border-radius: 14px;
}

body.charcoal-mode .coin-back {
filter: saturate(0.82) contrast(1.08) brightness(0.90);
}

body.charcoal-mode .card {
border-radius: 16px;
}

body.charcoal-mode .card:hover {
border-color: rgba(205, 180, 120, 0.35);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

body.charcoal-mode .project-img,
body.charcoal-mode .about-photo {
background:
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(135deg, rgba(205, 180, 120, 0.18), rgba(30, 48, 43, 0.24));
background-size: 16px 100%, auto;
border-color: rgba(238, 229, 209, 0.14);
}

body.charcoal-mode .skill {
background: rgba(238, 229, 209, 0.065);
border-color: rgba(238, 229, 209, 0.14);
color: #eee5d1;
}

body.charcoal-mode .socials a,
body.charcoal-mode .theme-toggle {
color: #eee5d1;
background: rgba(238, 229, 209, 0.07);
border-color: rgba(238, 229, 209, 0.16);
}

body.charcoal-mode .socials a:hover,
body.charcoal-mode .theme-toggle:hover {
box-shadow: 0 16px 34px rgba(205, 180, 120, 0.16);
border-color: rgba(205, 180, 120, 0.32);
}

body.charcoal-mode .blob.one {
background: radial-gradient(circle, rgba(205, 180, 120, 0.18), transparent 66%);
}

body.charcoal-mode .blob.two {
background: radial-gradient(circle, rgba(30, 48, 43, 0.34), transparent 66%);
}

body.charcoal-mode footer {
background: rgba(17, 17, 15, 0.58);
border-top-color: rgba(238, 229, 209, 0.14);
}