/* ==========================================================================
   tokens.css — colour, type and base behaviour shared by every page.

   Dark is the brand look; light follows the visitor's OS setting or the
   theme toggle (site.js sets data-theme on <html>). Every colour on the
   site comes from these tokens, so both themes stay complete.

   Older names (--brand-*, --text-*) are kept because notes.css uses them:
   --brand-navy means "page background" and --brand-emerald "accent ink".
   ========================================================================== */

:root {
    color-scheme: dark;

    --bg: #0b131a;
    --surface: #121c24;
    --surface-2: #17232d;
    --hairline: rgba(255, 255, 255, 0.09);
    --hairline-strong: rgba(255, 255, 255, 0.16);
    --ink: #f2f5f7;
    --ink-body: #a9b4bd;
    --ink-muted: #75828c;
    --accent: #2ec698;            /* accent as text / icons */
    --accent-fill: #2ec698;       /* accent as a background */
    --on-accent: #06281e;         /* text on an accent fill */
    --accent-soft: rgba(46, 198, 152, 0.13);
    --accent-line: rgba(46, 198, 152, 0.45);
    --glow: rgba(46, 198, 152, 0.10);
    --topbar: rgba(11, 19, 26, 0.78);

    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius: 18px;
    --radius-small: 12px;
    --page-width: 1120px;
    --gutter-left: max(20px, env(safe-area-inset-left, 0px));
    --gutter-right: max(20px, env(safe-area-inset-right, 0px));

    /* Compatibility names used by notes.css */
    --brand-navy: var(--bg);
    --brand-surface: var(--surface);
    --brand-surface-2: var(--surface-2);
    --brand-hairline: var(--hairline);
    --brand-emerald: var(--accent);
    --brand-emerald-soft: var(--accent-soft);
    --text-strong: var(--ink);
    --text-body: var(--ink-body);
    --text-muted: var(--ink-muted);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --bg: #f5f8f7;
        --surface: #ffffff;
        --surface-2: #edf3f0;
        --hairline: rgba(11, 19, 26, 0.10);
        --hairline-strong: rgba(11, 19, 26, 0.18);
        --ink: #0b131a;
        --ink-body: #3e4c55;
        --ink-muted: #56636b;
        --accent: #0b7a5a;
        --accent-fill: #2ec698;
        --on-accent: #06281e;
        --accent-soft: rgba(11, 122, 90, 0.09);
        --accent-line: rgba(11, 122, 90, 0.35);
        --glow: rgba(46, 198, 152, 0.16);
        --topbar: rgba(245, 248, 247, 0.82);
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f8f7;
    --surface: #ffffff;
    --surface-2: #edf3f0;
    --hairline: rgba(11, 19, 26, 0.10);
    --hairline-strong: rgba(11, 19, 26, 0.18);
    --ink: #0b131a;
    --ink-body: #3e4c55;
    --ink-muted: #56636b;
    --accent: #0b7a5a;
    --accent-fill: #2ec698;
    --on-accent: #06281e;
    --accent-soft: rgba(11, 122, 90, 0.09);
    --accent-line: rgba(11, 122, 90, 0.35);
    --glow: rgba(46, 198, 152, 0.16);
    --topbar: rgba(245, 248, 247, 0.82);
}

/* --- Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 84px; /* anchor jumps clear the sticky top bar */
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-body);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    color: var(--accent);
}
::selection {
    background: var(--accent-fill);
    color: var(--on-accent);
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
[hidden] {
    display: none !important;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-small);
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}