/* ==========================================================================
   nobrega.me — shared foundation
   Tokens, reset, theming, custom cursor, page chrome. Page-specific layout
   still lives in each page's inline <style>.
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
    --bg: #0A0A0A;
    --fg: #E8E8E8;
    --mid: #666666;
    --accent: #f7ed60;
    --accent-dim: rgba(247, 237, 96, 0.10);
    --border: #1A1A1A;
    --fg-mid: rgba(232, 232, 232, 0.78);
    --fg-low: rgba(232, 232, 232, 0.65);
    --fg-dim: rgba(232, 232, 232, 0.38);
    --title-blend: screen;
    --title-color: #ffffff;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #F6F6F4;
        --fg: #101010;
        --mid: #4B4B4B;
        --accent: #E5006E;
        --accent-dim: rgba(229, 0, 110, 0.10);
        --border: #D9D9D6;
        --fg-mid: rgba(16, 16, 16, 0.78);
        --fg-low: rgba(16, 16, 16, 0.65);
        --fg-dim: rgba(0, 0, 0, 0.35);
        --title-blend: multiply;
        --title-color: #000000;
    }
}

/* Manual theme overrides win over the OS preference in both directions. */
:root[data-theme="dark"] {
    --bg: #0A0A0A;
    --fg: #E8E8E8;
    --mid: #666666;
    --accent: #f7ed60;
    --accent-dim: rgba(247, 237, 96, 0.10);
    --border: #1A1A1A;
    --fg-mid: rgba(232, 232, 232, 0.78);
    --fg-low: rgba(232, 232, 232, 0.65);
    --fg-dim: rgba(232, 232, 232, 0.38);
    --title-blend: screen;
    --title-color: #ffffff;
}

:root[data-theme="light"] {
    --bg: #F6F6F4;
    --fg: #101010;
    --mid: #4B4B4B;
    --accent: #E5006E;
    --accent-dim: rgba(229, 0, 110, 0.10);
    --border: #D9D9D6;
    --fg-mid: rgba(16, 16, 16, 0.78);
    --fg-low: rgba(16, 16, 16, 0.65);
    --fg-dim: rgba(0, 0, 0, 0.35);
    --title-blend: multiply;
    --title-color: #000000;
}

/* ---- Base ------------------------------------------------------------- */
body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Grain texture overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSI0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjI1MCIgaGVpZ2h0PSIyNTAiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==");
    opacity: 0.032;
}

/* ---- Theme cross-fade ------------------------------------------------- */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition:
        background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        fill 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        stroke 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ---- Custom cursor -------------------------------------------------------
   The native cursor is only hidden once cursor.js confirms a fine pointer and
   adds .has-custom-cursor, so a failed script load never leaves no pointer. */
@media (hover: hover) and (pointer: fine) {
    html.has-custom-cursor,
    html.has-custom-cursor body,
    html.has-custom-cursor body * {
        cursor: none !important;
    }
}

.cursor {
    position: fixed;
    left: -40px;
    top: -40px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition:
        width 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.2s ease,
        opacity 0.25s ease;
    will-change: width, height, transform;
}

.cursor.cursor--visible { opacity: 0.55; }

.cursor.cursor--text {
    width: 2px;
    height: 18px;
    border-radius: 1px;
    opacity: 0.75;
}

.cursor.cursor--link {
    border-radius: 6px;
    background: var(--accent-dim);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    opacity: 1;
}

.cursor.cursor--snap {
    transition:
        left 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        top 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.22s ease,
        opacity 0.22s ease;
}

.cursor.cursor--down {
    width: 11px;
    height: 11px;
    opacity: 0.9;
}

/* ---- Typewriter caret ------------------------------------------------- */
.type-cursor {
    display: inline-block;
    width: 3px;
    height: 0.82em;
    background: var(--accent);
    margin-left: 3px;
    vertical-align: middle;
    border-radius: 1px;
    animation: blink 0.65s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ---- Sub-page header ------------------------------------------------------
   Used by /cv, /projects, /terms. The home page uses its own corner nav. */
.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 101;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.page-header a {
    text-decoration: none;
    color: var(--mid);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.page-header a:hover { color: var(--fg); }

.page-header .page-label {
    color: var(--fg-dim);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ---- Language + theme toggles --------------------------------------------
   Shared by every page; the home page positions them inside #top-controls. */
#lang-toggle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.63rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mid);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.22s ease;
}

#theme-toggle {
    display: flex;
    align-items: center;
    line-height: 0;
    color: var(--mid);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.22s ease;
}

#lang-toggle:hover,
#theme-toggle:hover { color: var(--fg); }

/* ---- Copyright / visit count ---------------------------------------------- */
.copyright-wrap {
    position: fixed;
    right: 22px;
    bottom: 14px;
    z-index: 9997;
    isolation: isolate;
    transform: translateZ(0);
}

.copyright {
    color: var(--fg-dim);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transition: color 0.2s ease;
}

.copyright-wrap:hover .copyright { color: var(--accent); }

.copyright-sep { opacity: 0.5; }
.visit-count { opacity: 0.65; }

.copyright-pages {
    position: absolute;
    bottom: 100%;
    right: 0;
    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.copyright-wrap:hover .copyright-pages,
.copyright-wrap:focus-within .copyright-pages {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.copyright-pages a {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.copyright-pages a:hover { color: var(--accent); }

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}