/* ============================================================
   Base — Reset, Fonts, Typography, Focus
   Loaded AFTER tokens.css, BEFORE all other styles.
   ============================================================ */

/* === Self-hosted Fonts (DSGVO: kein externes CDN zur Laufzeit) === */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter/InterVariable.woff2") format("woff2-variations"),
         url("/fonts/inter/InterVariable.woff2") format("woff2");
    font-feature-settings: "cv11", "ss01", "ss03";
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations"),
         url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* === Base typography === */
html {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background: var(--color-surface);
    min-height: 100vh;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}
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-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }

p { color: var(--color-text-secondary); }

small { font-size: var(--text-xs); color: var(--color-text-muted); }

code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}
code {
    background: var(--color-surface-sunken);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

/* === Links === */
a { color: var(--color-text-link); transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-text-link-hover); }
a:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* === Focus rings NUR auf interaktiven Elementen === */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
details:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-brand-primary);
}
/* Never show focus ring on pure content elements */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible, h5:focus-visible, h6:focus-visible,
p:focus, p:focus-visible,
div:focus, div:focus-visible {
    outline: none !important;
}

/* === Skip-to-Content-Link (WCAG 2.4.1) === */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 10px 16px;
    background: var(--color-brand-primary);
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    transform: translateY(-100%);
    transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* === sr-only Helper (Screen-Reader-only Text) === */
.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;
}

/* === Selection === */
::selection {
    background: var(--color-brand-primary-tint);
    color: var(--color-text-primary);
}

/* === Scrollbar (WebKit) === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-neutral-400); background-clip: content-box; }