/* ============================================================
   Base — reset, typografi, basiselementer
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-base);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
}

/* Typografi-hierarki */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    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); font-weight: var(--weight-medium); }
h5 { font-size: var(--text-md); font-weight: var(--weight-medium); }
h6 { font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }

p { margin: 0; line-height: var(--leading-relaxed); }
small { font-size: var(--text-xs); color: var(--text-muted); }

a {
    color: var(--brand-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--brand-300); }
/* Lys modus: bruk mørkere brand-toner for AA-kontrast mot lys bg */
[data-theme="light"] a { color: var(--brand-700); }
[data-theme="light"] a:hover { color: var(--brand-800); }
[data-theme="light"] .text-brand { color: var(--brand-700); }
a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Code */
code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}
code {
    background: var(--bg-glass);
    color: var(--brand-300);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
}
kbd {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-bottom-width: 2px;
    padding: 0.1em 0.5em;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}
pre {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow: auto;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* Skip-link for tilgjengelighet */
.skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    background: var(--brand-500);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: var(--z-tooltip);
    font-weight: var(--weight-medium);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* A11y: synlig focus-ring som standard på alle interaktive elementer */
:where(a, button, [role="button"], select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-500, #6c63ff);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Reduserer animasjon for brukere som ber om det */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Selection */
::selection { background: var(--brand-500); color: white; }

/* Scrollbar — moderne minimalistisk */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Tabell — base */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: var(--weight-semibold); }

/* Form elements — reset */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* HR */
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* Bilder responsive */
img, svg, video { max-width: 100%; display: block; }

/* === Tekst-utilities === */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-success   { color: var(--success-fg); }
.text-warning   { color: var(--warning-fg); }
.text-danger    { color: var(--danger-fg); }
.text-info      { color: var(--info-fg); }
.text-brand     { color: var(--brand-400); }

.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }
.font-mono      { font-family: var(--font-mono); }

.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout-utilities */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.hidden { display: none !important; }