/**
 * Design tokens. Default = Frisk-inspirert (helsedir-frisk).
 * Legacy --frisk-* names are aliases for incremental migration.
 * html[data-ui="..."] in themes/*.css overrides these per variation.
 */

:root {
    /* Canonical brand (logoblå + kirsebær, jf. docs/HELSEDIR_BRANDING.md) */
    --brand-primary: #025169;
    --brand-primary-dark: #013d4e;
    --brand-primary-mid: #047FA4;
    --accent: #025169;
    --accent-dark: #013d4e;

    /* Surfaces & text */
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --text-primary: #1f2937;
    --text-muted: #666666;
    --text-heading: #013d4e;
    --border-default: #b3d9f5;
    --border-subtle: #e5e7eb;

    /* Header / chrome */
    --header-background: #025169;
    --header-text: #ffffff;
    --header-subtitle: rgba(255, 255, 255, 0.92);
    --header-stripe-width: 4px;
    --header-stripe-color: var(--accent);
    --nav-border-top: rgba(255, 255, 255, 0.15);
    --nav-tab-color: rgba(255, 255, 255, 0.9);
    --nav-tab-hover-bg: rgba(255, 255, 255, 0.12);
    --nav-tab-active-bg: transparent;
    --nav-tab-active-line: var(--accent);
    --nav-tab-active-shadow: inset 0 -3px 0 var(--nav-tab-active-line);
    --logo-ntnu-filter: brightness(0) invert(1);

    /* Page body (flat; gradients only in helsedir-fresh) */
    --body-background: #ffffff;

    /* Info / cards */
    --info-tint-from: #e6f2ff;
    --info-tint-to: #f0f7fc;
    --info-border: var(--border-default);
    --card-padding: 2rem;
    --card-radius: 1rem;
    --card-border-width: 1px;
    --card-border-color: var(--brand-primary);
    --card-top-stripe-width: 4px;
    --card-top-stripe-color: var(--accent);
    --card-shadow: var(--shadow-md);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --footer-shadow: 0 -2px 8px rgba(2, 81, 105, 0.06);

    /* Focus ring (WCAG synlig + på merkevare) */
    --focus-ring: var(--accent);
    --focus-ring-soft: rgba(2, 81, 105, 0.22);

    /* Controls (viz, sliders) */
    --control-focus: var(--brand-primary-mid);
    --control-focus-soft: rgba(2, 81, 105, 0.2);

    /* Buttons */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;

    /* Typography scale */
    --font-family: "Roboto", "Arial", system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2.25rem;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Motion */
    --motion-duration: 0.2s;
    --motion-ease: ease;

    /* Legacy FRISK aliases (map to canonical tokens) */
    --frisk-logoblå-1: var(--brand-primary);
    --frisk-logoblå-2: var(--brand-primary-mid);
    --frisk-white: var(--surface);
    --frisk-neutral-light: #f5f5f5;
    --frisk-neutral-medium: var(--text-muted);
    --frisk-neutral-dark: #424242;
    --frisk-blue-light: var(--info-tint-from);
    --frisk-blue-soft: var(--surface-muted);
    --frisk-blue-border: var(--border-default);
    --frisk-teal: var(--accent);
    --frisk-teal-light: #E6F2FF;
    --frisk-gray-50: #f8fafc;
    --frisk-gray-100: #f1f5f9;
    --frisk-gray-700: #424242;
    --frisk-font: var(--font-family);
    --frisk-shadow-md: var(--shadow-md);
    --frisk-shadow-lg: var(--shadow-lg);

    /* Banner tokens (legacy / Tailwind CDN block) */
    --theme-banner-from: var(--brand-primary-mid);
    --theme-banner-to: var(--brand-primary);
}

.frisk-body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    background: var(--body-background);
    min-height: 100vh;
    color: var(--text-primary);
}

.frisk-body h1,
.frisk-body h2,
.frisk-body h3,
.header-title {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header {
    background: var(--header-background);
    color: var(--header-text);
    box-shadow: var(--shadow-lg);
    border-top: var(--header-stripe-width, 0) solid var(--header-stripe-color, transparent);
}

.container-header,
.container-main,
.container-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 0;
}

.header-text {
    flex: 1;
}

.header-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem;
    line-height: var(--line-height-tight);
}

.header-title-link {
    color: var(--header-text);
    text-decoration: none;
    transition: opacity var(--motion-duration) var(--motion-ease);
}

.header-title-link:hover {
    opacity: 0.92;
}

.header-subtitle {
    color: var(--header-subtitle);
    font-size: var(--font-size-base);
}

/* Branding strict: lås utseende, skjul UI-velger */
html[data-branding="strict"] .ui-variation-picker {
    display: none !important;
}

/* Inline SVG icons (Font Awesome replacement) */
.icon-svg {
    display: inline-block;
    vertical-align: -0.15em;
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
}

.icon-inline.icon-svg {
    margin-right: 0.5rem;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.18em;
}

.svg-icon--spin {
    animation: spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .svg-icon--spin {
        animation: none;
    }

    .hover-lift:hover,
    .bg-white.rounded-xl:hover,
    .bg-gradient-to-br:hover,
    .result-card:hover,
    button:hover,
    a.button:hover {
        transform: none !important;
    }
}