/* ============================================================
   ELEVEN — Base Styles
   Reset, body defaults, container, utility classes, theme transitions
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Premium selection color */
::selection {
    background: var(--color-accent);
    color: var(--color-bg);
}
::-moz-selection {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* ── FOUC Prevention ──
   Before JS runs, the body has .no-transitions which suppresses
   all animation. JS removes it after applying the correct theme. */
body.no-transitions,
body.no-transitions *,
body.no-transitions *::before,
body.no-transitions *::after {
    transition: none !important;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-body);
    line-height: 1.8;
    overflow-x: hidden;
    /* Granular theme transitions — not 'transition: all' */
    transition: background-color var(--transition-theme),
                color var(--transition-theme);
}

/* Theme transition helpers — apply to elements that change visually on toggle */
.theme-transition {
    transition: background-color var(--transition-theme),
                color var(--transition-theme),
                border-color var(--transition-theme),
                box-shadow var(--transition-theme);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ── Container ── */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ── Scroll Progress Bar ── */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--color-progress);
    z-index: 9999;
    width: 0%;
    transition: background var(--transition-theme);
}

/* ── Skip Link (Accessibility) ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 10000;
    transition: top 0.2s;
}
.skip-link:focus {
    top: var(--space-sm);
}

/* ── Utility: Screen Reader Only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Focus Visible ── */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* High-contrast focus for buttons and links */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
}