/* ── Design tokens ─────────────────────────────────── */
:root {
    --clr-brand:      #A13042;  /* nordic rød accent */
    --clr-brand-dark: #7E2533;
    --clr-brand-soft: rgba(161, 48, 66, 0.12);

    --clr-bg:         #EDF2F3;
    --clr-surface:    #FFFFFF;
    --clr-border:     #D6E0E3;

    --clr-text:       #213138;
    --clr-text-muted: #667880;

    --clr-danger:     #B63B4F;
    --clr-success:    #1A6B3C;
    --clr-warning:    #C17A14;
    --clr-info:       #1A4F8A;

    --font-ui:        "Manrope", "Segoe UI", "Avenir Next", Arial, sans-serif;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  18px;

    --shadow-sm:  0 2px 8px rgba(37, 53, 59, 0.05);
    --shadow-md:  0 8px 22px rgba(37, 53, 59, 0.08);
    --shadow-lg:  0 16px 44px rgba(37, 53, 59, 0.11);

    --transition: 140ms ease;
}

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

html { font-size: 16px; }

body {
    font-family: var(--font-ui);
    color: var(--clr-text);
    background: linear-gradient(160deg, #F8FBFC 0%, var(--clr-bg) 52%, #E7EEF0 100%);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--clr-text);
    line-height: 1.25;
    margin-bottom: 0.4em;
    font-weight: 700;
}

a {
    color: var(--clr-brand);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Forms ─────────────────────────────────────────── */
input, textarea, select {
    font-family: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--clr-brand) !important;
    box-shadow: 0 0 0 3px var(--clr-brand-soft);
}

/* ── Buttons ───────────────────────────────────────── */
button {
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Utilities ─────────────────────────────────────── */
.hidden { display: none !important; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.grid { display: grid; gap: 1rem; }

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    html { font-size: 15px; }
}
@media (max-width: 480px) {
    html { font-size: 14px; }
    .grid-2 { grid-template-columns: 1fr; }
}