/* Site-wide base — near-white ground, Libre Franklin (display + body) + IBM Plex Mono, single indigo accent */
/* Shared by every page. Page-specific styles (hero, résumé sections, project cards) live in their own file, loaded after this one. */

:root {
    color-scheme: light;
    --paper: #FAF9F7;
    --ink: #17181C;
    --ink-soft: #3D3E44;
    --muted: #6E6F76;
    --line: #E3E1DB;
    --tag-bg: #F1F0EB;
    --accent: #33417A;
    --accent-hover: #283463;
    --accent-border: rgba(51, 65, 122, 0.35);
    --accent-ink: #FAF9F7;
    --selection-bg: rgba(51, 65, 122, 0.2);
}

/* Dark theme: system preference (unless explicitly overridden to light) ... */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #14151A;
        --ink: #F2F1ED;
        --ink-soft: #C9C7C0;
        --muted: #8C8B85;
        --line: #2C2D33;
        --tag-bg: #1F2026;
        --accent: #7C8CE0;
        --accent-hover: #96A2E8;
        --accent-border: rgba(124, 140, 224, 0.35);
        --accent-ink: #14151A;
        --selection-bg: rgba(124, 140, 224, 0.28);
    }
}

/* ... or an explicit choice from the theme toggle, either direction */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #14151A;
    --ink: #F2F1ED;
    --ink-soft: #C9C7C0;
    --muted: #8C8B85;
    --line: #2C2D33;
    --tag-bg: #1F2026;
    --accent: #7C8CE0;
    --accent-hover: #96A2E8;
    --accent-border: rgba(124, 140, 224, 0.35);
    --accent-ink: #14151A;
    --selection-bg: rgba(124, 140, 224, 0.28);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Libre Franklin', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

a {
    color: inherit;
}

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

.mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

.display {
    font-family: 'Libre Franklin', system-ui, sans-serif;
}

.muted-link {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease-out;
}

.muted-link:hover {
    color: var(--ink);
}

.accent-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
    transition: border-color 0.15s ease-out;
}

.accent-link:hover {
    border-bottom-color: var(--accent);
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, transform 0.1s ease-out;
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.btn--primary:hover {
    background: var(--accent-hover);
}

.btn--secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn--secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

/* Section headings ("eyebrow" labels) */

.section-heading {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Nav */

.site-nav {
    width: 100%;
}

.site-nav__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.site-nav__name {
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.15s ease-out;
}

.site-nav__name:hover {
    color: var(--accent);
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.site-nav__lang {
    display: flex;
    gap: 10px;
    padding-left: 4px;
    border-left: 1px solid var(--line);
}

.site-nav__lang a {
    text-decoration: none;
    color: var(--muted);
    transition: color 0.15s ease-out;
}

.site-nav__lang a[aria-current="true"] {
    color: var(--accent);
}

.site-nav__lang a:hover {
    color: var(--ink);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease-out;
}

.theme-toggle:hover {
    color: var(--ink);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
}

.theme-toggle .theme-toggle__sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle__moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle__sun {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .theme-toggle__moon {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle .theme-toggle__sun {
        display: block;
    }
}

/* Page container shell */

.site-main {
    width: 100%;
}

.site-main__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

/* Footer */

.site-footer {
    width: 100%;
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer__note {
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}

.site-footer__links {
    display: flex;
    gap: 24px;
    font-size: 13px;
    line-height: 1.4;
}

/* Responsive */

@media (max-width: 640px) {
    .site-nav__inner,
    .site-main__inner,
    .site-footer__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}