/* ============================================================================
   SEO Tracker — Base
   ----------------------------------------------------------------------------
   Global resets, element defaults, typography base, scrollbars, and small
   cross-cutting utilities that don't belong in a component.

   Depends on: tokens.css, theme-dark.css.
   Load order: tokens.css → theme-dark.css → base.css → components.css → features.css
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   Bethany Elingston — display font (was declared at the top of style.css)
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Bethany Elingston';
    src: url('/static/fonts/BethanyElingston.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Element baseline
   ───────────────────────────────────────────────────────────────────────── */
html {
    background-color: var(--surface-0);
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--ink-body);
    background: var(--surface-0);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use the display font by default — templates override with .ui-* */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color: var(--ink-strong);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--sp-5);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
    margin: 0 0 var(--sp-5);
    color: var(--ink-body);
}
small { font-size: var(--text-xs); }

strong, b {
    font-weight: var(--weight-semibold);
    color: var(--ink-strong);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--accent-ghost);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: var(--r-xs);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink-body);
    padding: var(--sp-5) var(--sp-7);
    border-radius: var(--r-md);
    overflow-x: auto;
    margin: 0 0 var(--sp-5);
}
pre code { background: none; color: inherit; padding: 0; }

hr {
    border: none;
    height: 1px;
    background: var(--border-subtle);
    margin: var(--sp-9) 0;
}

img, svg, video, canvas, iframe { max-width: 100%; }
img { display: block; }

/* ─────────────────────────────────────────────────────────────────────────────
   Selection
   ───────────────────────────────────────────────────────────────────────── */
::selection {
    background: var(--accent-tint);
    color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Scrollbars — webkit
   ───────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
    background: var(--border-standard);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ─────────────────────────────────────────────────────────────────────────────
   Sidebar list-marker reset (was an inline <style> in base.html line 49)
   ───────────────────────────────────────────────────────────────────────── */
.sidebar li,
.sidebar-menu li,
.sidebar-section li,
.sidebar-section-items li,
.sidebar-item {
    list-style: none !important;
    list-style-type: none !important;
}
.sidebar li::marker,
.sidebar-menu li::marker,
.sidebar-section-items li::marker {
    content: none !important;
    font-size: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Backward-compat utility colours (were at top of style.css)
   Kept for templates that already use .text-gold / .bg-gold / .text-bg-gold.
   ───────────────────────────────────────────────────────────────────────── */
.text-gold { color: var(--accent) !important; }
.bg-gold   { background-color: var(--accent) !important; }
.bg-gold.bg-opacity-15 { background-color: rgba(240, 224, 80, 0.15) !important; }
.text-bg-gold   { background-color: var(--accent) !important; color: var(--accent-ink) !important; }
.text-bg-purple { background-color: var(--accent) !important; color: var(--accent-ink) !important; }