/* theme.css — shared design tokens, type and navbar for every page
   (homepage via _layouts/main.html, notes + blog via _layouts/notes.html).
   Linked from _includes/head.html right after base.css.
   Black stays black: every surface is #000, depth comes from hairlines. */

    :root {
        --bg: #000;
        --text: #ececec;
        --text-muted: #8d9199;
        --hairline: rgba(255, 255, 255, .14);
        --hairline-strong: rgba(255, 255, 255, .28);
        --accent: #5bc0de;
        --accent-hover: #8fd6ec;
        --accent-glow: rgba(91, 192, 222, .10);

        --font-text: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
        --font-display: "Roboto Serif", Georgia, serif;
        --font-mono: "Roboto Mono", SFMono-Regular, Menlo, Consolas, monospace;

        /* type scale */
        --fs-xs: 12px;
        --fs-sm: 14px;
        --fs-base: 16px;
        --fs-md: 18px;
        --fs-lg: 22px;
        --fs-xl: 38px;
        --fs-display: 54px;

        --section-gap: 110px;
    }

    body {
        background-color: var(--bg);
        color: var(--text);
        font-family: var(--font-text);
        font-size: var(--fs-base);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6,
    .btn,
    .navbar-custom {
        font-family: var(--font-text);
        letter-spacing: -0.01em;
    }

    a {
        color: var(--accent);
    }

    a:hover,
    a:focus {
        color: var(--accent-hover);
    }

/* ---------- navbar: translucent black, accent underline for active ---------- */

    .navbar-custom .navbar-brand {
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .navbar-custom .nav li a {
        position: relative;
        font-size: var(--fs-sm);
        font-weight: 500;
        letter-spacing: .02em;
        color: var(--text-muted);
        transition: color .2s;
    }

    .navbar-custom .nav li.active,
    .navbar-custom .nav li a:hover,
    .navbar-custom .nav li a:focus,
    .navbar-custom .nav li a.active {
        background-color: transparent;
    }

    .navbar-custom .nav li a:hover,
    .navbar-custom .nav li a:focus,
    .navbar-custom .nav li.active a {
        color: #fff;
    }

    .navbar-custom .nav li.active a::after {
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 8px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
    }

    @media (min-width: 767px) {
        .top-nav-collapse {
            background-color: rgba(0, 0, 0, .72);
            -webkit-backdrop-filter: saturate(140%) blur(14px);
            backdrop-filter: saturate(140%) blur(14px);
        }

        .navbar-custom.top-nav-collapse {
            border-bottom: 1px solid var(--hairline);
        }
    }