/* =====================================================
   THEME
===================================================== */

:root {
    /* Backgrounds */
    --bs-body-bg: #0d1117;
    --bs-body-bg-rgb: 13, 17, 23;

    --bs-secondary-bg: #161b22;
    --bs-secondary-bg-rgb: 22, 27, 34;

    --bs-tertiary-bg: #1c2128;
    --bs-tertiary-bg-rgb: 28, 33, 40;

    /* Text */
    --bs-body-color: #c9d1d9;
    --bs-body-color-rgb: 201, 209, 217;

    --bs-secondary-color: #8b949e;
    --bs-secondary-color-rgb: 139, 148, 158;

    --bs-heading-color: #f0f6fc;

    /* Primary */
    --bs-primary: #58a6ff;
    --bs-primary-rgb: 88, 166, 255;

    /* Links */
    --bs-link-color: #58a6ff;
    --bs-link-color-rgb: 88, 166, 255;

    --bs-link-hover-color: #79c0ff;
    --bs-link-hover-color-rgb: 121, 192, 255;

    /* Borders */
    --bs-border-color: #30363d;
    --bs-border-color-translucent: rgba(240, 246, 252, 0.1);

    /* Custom */
    --accent: #58a6ff;
    --accent-light: #79c0ff;
    --accent-secondary: #39c5cf;

    --surface: #161b22;
    --surface-light: #1c2128;

    --text-main: #c9d1d9;
    --text-muted: #8b949e;
    --text-strong: #f0f6fc;
}


/* =====================================================
   GLOBAL
===================================================== */

html {
    scroll-behavior: smooth;
}

body {
    padding-top: 70px;

    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* Evita navbar cobrindo títulos ao navegar por âncoras */
section {
    scroll-margin-top: 80px;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {
    background-color: rgba(13, 17, 23, 0.95) !important;
    border-bottom: 1px solid var(--bs-border-color);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    color: var(--text-strong);
    font-weight: 600;
}

.navbar-brand:hover {
    color: var(--accent);
}

.navbar .nav-link {
    color: var(--text-muted);
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--accent-light);
}

.navbar .nav-link.active {
    color: var(--accent);
}


/* Hambúrguer */
.navbar-toggler {
    border-color: var(--bs-border-color);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}


/* =====================================================
   TITLES
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-strong);
}

.section-title {
    font-weight: 700;
    margin-bottom: 2rem;
}

.section-title::before {
    content: "> ";
    color: var(--bs-btn-color);
}


/* =====================================================
   LINKS
===================================================== */

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--bs-link-hover-color);
}


/* =====================================================
   BUTTONS
===================================================== */

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);

    --bs-btn-hover-bg: #79c0ff;
    --bs-btn-hover-border-color: #79c0ff;

    --bs-btn-active-bg: #388bfd;
    --bs-btn-active-border-color: #388bfd;

    --bs-btn-color: #0d1117;
    --bs-btn-hover-color: #0d1117;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);

    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #0d1117;
}


/* =====================================================
   CARDS
===================================================== */

.card {
    background-color: var(--surface);
    border: 1px solid var(--bs-border-color);
    color: var(--text-main);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
}

.card-title {
    color: var(--text-strong);
}


/* =====================================================
   BADGES / STACK
===================================================== */

.tech-badge {
    display: inline-block;

    padding: 0.4rem 0.7rem;
    margin: 0.2rem;

    background-color: var(--surface-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;

    color: var(--text-main);
    font-size: 0.85rem;
}

.tech-badge:hover {
    border-color: var(--accent);
    color: var(--accent-light);
}


/* =====================================================
   HERO
===================================================== */

.hero {
    min-height: calc(100vh - 70px);

    display: flex;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
}

.hero .subtitle {
    color: var(--accent);
    font-family: monospace;
    font-size: 1.1rem;
}

.hero p {
    color: var(--text-muted);
    max-width: 650px;
}


/* =====================================================
   SECTIONS
===================================================== */

section {
    padding: 5rem 0;
}

section:nth-of-type(even) {
    background-color: var(--surface);
}


/* =====================================================
   TERMINAL / LAB
===================================================== */

.terminal {
    background-color: #090c10;

    border: 1px solid var(--bs-border-color);
    border-radius: 8px;

    padding: 1.5rem;

    font-family:
        "JetBrains Mono",
        "Fira Code",
        monospace;
}

.terminal-command {
    color: var(--accent-secondary);
}

.terminal-output {
    color: var(--text-muted);
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    padding: 2rem 0;

    border-top: 1px solid var(--bs-border-color);

    color: var(--text-muted);
    background-color: #090c10;
}


/* =====================================================
   SELECTION
===================================================== */

::selection {
    background-color: rgba(var(--bs-primary-rgb), 0.35);
    color: #ffffff;
}