:root {
    --bg-0: #000000;         /* black */
    --bg-1: #0b0b0f;         /* near-black */
    --bg-2: #071d5f;         /* deep slate */
    --tx-0: #ffffff;         /* light text */
    --tx-1: #ffffff;         /* muted text */
    --acc-0: #7c3aed;        /* violet */
    --acc-1: #22d3ee;        /* cyan */
    --acc-2: #a3e635;        /* lime */
    --card: #0d0f14;         /* card bg */
    --border: #1f2937;       /* border */
    --shadow: 0 6px 30px rgba(0, 0, 0, .45);
}

html, body {
    background: var(--bg-0);
    color: var(--tx-0);      /* Ensura white text globally */
}

/* Navigation */
.navbar {
    background: linear-gradient(180deg, #050507 0%, rgba(5, 5, 7, 0.7) 100%);
    backdrop-filter: blur(8px);
}

.nav-link,
.navbar-brand {
    color: var(--tx-1) !important;
}

.nav-link.active,
.nav-link:hover,
.navbar-brand:hover {
    color: var(--acc-1) !important;
}

/* Hero */
.hero {
    position: relative;
    min-height: 85vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(80% 60% at 50% 40%, rgba(34, 211, 238, .08), rgba(124, 58, 237, .06) 40%, transparent 70%),
        radial-gradient(40% 40% at 80% 80%, rgba(163, 230, 53, .08), transparent 60%);
    color: var(--tx-0);      /* White text for hero */
}

.glow {
    filter:
        drop-shadow(0 0 1.6rem rgba(124, 58, 237, .45))
        drop-shadow(0 0 .8rem rgba(34, 211, 238, .35));
}

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--tx-0);      /* Ensure text in cards is white */
}

.card-title {
    color: var(--tx-0);      /* White card titles */
}

.badge-tech {
    background: linear-gradient(90deg, var(--acc-0), var(--acc-1));
    border: none;
    color: #fff;             /* Ensure text on gradient badge is visible */
}

/* Buttons */
.btn-neo {
    position: relative;
    border: 1px solid rgba(124, 58, 237, .4);
    color: var(--tx-0);
    background: rgba(124, 58, 237, .12);
}

.btn-neo:hover {
    border-color: var(--acc-1);
    color: var(--tx-0);
    background: rgba(34, 211, 238, .15);
    box-shadow: 0 0 24px rgba(34, 211, 238, .25);
}

/* Sections */
section {
    padding: 72px 0;
    color: var(--tx-0);      /* Ensure section text is white */
}

.section-title {
    letter-spacing: .4px;
    color: var(--tx-0);      /* White section titles */
}

.section-sub {
    color: var(--tx-1);      /* Slightly muted white */
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* Projects grid */
.project-card {
    transition: transform .25s ease;
    color: var(--tx-0);      /* Text in project cards white */
}

.project-card:hover {
    transform: translateY(-6px);
}

/* Footer */
footer {
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(10, 10, 12, .4) 0%, rgba(10, 10, 12, 1) 100%);
    color: var(--tx-0);      /* White footer text */
}

/* 3D tilt */
.tilt {
    transform-style: preserve-3d;
}

.tilt .tilt-layer {
    transform: translateZ(20px);
}

/* Forms */
.form-control,
.form-select,
textarea {
    background: #0b0d12;
    border: 1px solid #222838;
    color: var(--tx-0);
}

.form-control:focus {
    background: #0b0d12;
    border-color: #3b82f6;
    box-shadow: 0 0 0 .25rem rgba(59, 130, 246, .15);
}

/* DARK MODE */
.dark-mode {
    background: #121212;
    color: #f1f1f1;
}

.dark-mode .navbar {
    background: #111 !important;
}

.dark-mode .hero {
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    color: #f1f1f1;
}

.dark-mode .card {
    background: #1e1e1e;
    color: #f1f1f1;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}

.dark-mode input,
.dark-mode textarea {
    background: #222;
    color: #eee;
    border: 1px solid #444;
}

.dark-mode input:focus,
.dark-mode textarea:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 5px #0d6efd;
}

.dark-mode footer {
    background: #0a0a0a;
    color: #bbb;
}

/* TOGGLE BUTTON */
#darkToggle {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1.4rem;
    color: white;
    margin-left: 15px;
    transition: transform 0.3s;
}

#darkToggle:hover {
    transform: rotate(20deg);
}

/* LIGHT MODE */
.light-mode {
    --bg-0: #f5f5f5;
    --bg-1: #ffffff;
    --bg-2: #e0e0e0;
    --tx-0: #111111;
    --tx-1: #333333;
    --acc-0: #7c3aed;
    --acc-1: #0ea5e9;
    --acc-2: #65a30d;
    --card: #ffffff;
    --border: #d1d5db;
    --shadow: 0 6px 30px rgba(0, 0, 0, .1);
}

.light-mode .navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

.light-mode .nav-link,
.light-mode .navbar-brand {
    color: var(--tx-1) !important;
}

.light-mode .nav-link.active,
.light-mode .nav-link:hover,
.light-mode .navbar-brand:hover {
    color: var(--acc-1) !important;
}

.light-mode .card {
    background: var(--card);
    color: var(--tx-0);
    border: 1px solid var(--border);
}

.light-mode .section-sub {
    color: var(--tx-1);
}

.light-mode .form-control,
.light-mode textarea {
    background: #fff;
    color: var(--tx-0);
    border: 1px solid #ccc;
}

.light-mode footer {
    background: #ffffff;
    color: #333;
}

.light-mode .link-light {
    color: var(--tx-0) !important;
}

.link-light .btn-outline-light {
    color: var(--tx-0) !important;
}

.light-mode .btn-outline-light {
    color: #fff !important;          /* texto e ícone */
    border-color: #000 !important;   /* borda preta */
    background-color: #000 !important; /* fundo preto */
}

.light-mode .btn-outline-light:hover {
    background-color: #fff !important; /* usa sua cor de destaque */
    border-color: var(--acc-1) !important;
    color: #000 !important;
}