/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS - CCM brand foundation
   Rolig, generøs whitespace · runde hjørner · soft shadows
   Accent sættes af skinnet (rude-skin.css): iOS-blå #0A84FF. Base her = neutral grafit.
   Single source of truth for colors, spacing, radius, shadow, type.
═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── COLOR: BRAND + SEMANTICS ─────────────────────────────── */
    /* NEUTRAL BASE (2026-06-03): paletten her er bevidst farveløs grafit —
       IKKE brand-farvet; uden skin = neutral grafit, ingen brand-leak.
       FIX 2026-06-10 (audit css-design-4): bauhaus-skin.css er arkiveret
       (kun i css/_archive). Det LIVE skin er skins/rude-skin.css (loadet
       SIDST) der overstyrer accenten mens skinnet er på.
       Skift brand-farven i css/design/accent.css (per-produkt accent),
       ikke her. */
    --color-accent: #5A6B7C;            /* grafit-grå (neutral) */
    --color-accent-hover: #6E8092;
    --color-accent-dim: rgba(90, 107, 124, 0.08);
    --color-accent-soft: rgba(90, 107, 124, 0.14);
    /* rgba-komponent-tokens (neutral) — skinnet sætter brand-trioerne */
    --accent-rgb: 90, 107, 124;
    --pop-rgb: 90, 107, 124;
    --success-rgb: 90, 107, 124;
    --danger-rgb: 90, 107, 124;

    /* Semantik = neutral grafit i base (skinnet giver dem brand-farve). */
    --color-success: #5A6B7C;
    --color-success-bg: rgba(90, 107, 124, 0.10);
    --color-warn: #8A8170;
    --color-warn-bg: rgba(138, 129, 112, 0.10);
    --color-danger: #8A6B6B;
    --color-danger-bg: rgba(138, 107, 107, 0.10);
    --color-info: #5A6B7C;
    --color-info-bg: rgba(90, 107, 124, 0.10);
    /* Sekundære navne som produkter bruger uden lokal def (neutral fallback) */
    --warn: var(--color-warn);
    --info: var(--color-info);

    /* Dark theme surfaces - dybere plasma-navy med tydelig teal-undertone */
    --color-bg: #080c14;                          /* markant dybere midnight */
    --color-bg-tint-1: rgba(90, 107, 124, 0.12);  /* neutral glød top-venstre (skin → kobolt) */
    --color-bg-tint-2: rgba(90, 107, 124, 0.10);  /* neutral glød bund-højre */
    --color-surface: rgba(255, 255, 255, 0.055);  /* lidt mere løft */
    --color-surface-hover: rgba(255, 255, 255, 0.1);
    --color-card: rgba(32, 42, 64, 0.78);         /* teal-blå undertone */
    --color-card-solid: rgba(28, 36, 56, 0.98);
    --color-surface-1: #1a1d24;                   /* solid widget-card base (canvas phoner-screen + access-dialog) */
    --color-surface-2: #0f1115;                   /* nested/elevated controls (pickers, inputs på dark canvas) */
    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* Text ramp - højere kontrast */
    --color-text-1: #f5f9ff;
    --color-text-2: #a8b3c8;
    --color-text-3: #7a849a;
    --color-on-accent: #ffffff;

    /* ── SPACING: Canva-inspireret generøs whitespace ─────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 18px;      /* +2 - mere luft i standard paddings */
    --space-5: 24px;      /* +4 - kort og sektioner ånder mere */
    --space-6: 32px;      /* +8 - mellem-niveau sektion-gap */
    --space-7: 44px;      /* +12 - roligt åndehul */
    --space-8: 56px;      /* +16 - rigtig breathing room */
    --space-9: 72px;

    /* ── RADIUS: Canva runde, bløde hjørner ──────────────────── */
    /* RADIUS-SKALA = ALIGNED m. design/tokens.css (kanonisk, loades sidst via index.css → vinder).
       Var 10/16/22/32 her men 10/14/18/24 i tokens.css → dette block var dødt+løgnagtigt.
       Nu identisk, så fallback (hvis index.css fejler) matcher og editorer ser sandheden. */
    --radius-sm: 10px;
    --radius-md: 14px;    /* signatur-kortet (var 16) */
    --radius-lg: 18px;    /* store paneler (var 22) */
    --radius-xl: 24px;    /* hero-elementer (var 32) */
    --radius-pill: 999px;

    /* ── SHADOW: Canva "luftig" - diffus, lav opacity, lang blur */
    --shadow-xs: 0 1px 3px rgba(15, 20, 35, 0.08);
    --shadow-sm: 0 4px 14px rgba(15, 20, 35, 0.10), 0 1px 3px rgba(15, 20, 35, 0.05);
    --shadow-md: 0 12px 32px rgba(15, 20, 35, 0.14), 0 2px 8px rgba(15, 20, 35, 0.06);
    --shadow-lg: 0 24px 60px rgba(15, 20, 35, 0.20), 0 4px 16px rgba(15, 20, 35, 0.08);

    /* ── TYPE ──────────────────────────────────────────────────
     * Konsistent skala der parres med Inter Variable. Reglen for
     * hierarki: ved hvert spring opad skal BAADE størrelse OG vægt
     * stige (en h2 skal være baade større og federe end brødtekst).
     */
    --font-size-xxs: 0.625rem;  /* 10px - eyebrow / badges */
    --font-size-xs:  0.72rem;   /* 11.5px - meta / hint */
    --font-size-sm:  0.82rem;   /* 13px - sub / brødtekst small */
    --font-size-md:  0.92rem;   /* 14.7px - brødtekst */
    --font-size-lg:  1.05rem;   /* 16.8px - kort-titel */
    --font-size-xl:  1.25rem;   /* 20px - sektion-titel */
    --font-size-2xl: 1.6rem;    /* 25.6px - side-overskrift */
    --font-size-3xl: 2.1rem;    /* 33.6px - hero overskrift */

    /* Vægte: Inter understøtter 100-900. Vi bruger disse 5. */
    --font-weight-regular:  400;   /* brødtekst */
    --font-weight-medium:   500;   /* lett betoning */
    --font-weight-semibold: 600;   /* kort-titler, mellemvægt */
    --font-weight-bold:     700;   /* sektion + side-overskrifter */
    --font-weight-extrabold:800;   /* display-tal, hero hovedtal */

    --line-height-tight: 1.15;     /* overskrifter */
    --line-height-snug:  1.35;     /* sub-headings */
    --line-height-normal:1.55;     /* brødtekst */
    --line-height-relaxed:1.7;     /* lange afsnit */

    /* Letter-spacing - Inter har god default, men negative tracking
     * på store overskrifter giver et mere polished look. */
    --tracking-tight:  -0.02em;    /* h1 / display */
    --tracking-snug:   -0.01em;    /* h2-h3 */
    --tracking-normal: 0;
    --tracking-wide:   0.06em;     /* eyebrow / labels */

    /* ── MOTION ──────────────────────────────────────────────── */
    --motion-fast: 120ms ease;
    --motion-base: 180ms ease;
    --motion-slow: 280ms cubic-bezier(0.22, 1, 0.36, 1);

    /* ═══════════════════════════════════════════════════════════
       LEGACY ALIASES - existing code depends on these tokens.
       Mapping new tokens → old names so nothing visually changes.
    ═══════════════════════════════════════════════════════════ */
    --accent: var(--color-accent);
    --accent-hover: var(--color-accent-hover);
    --accent-dim: var(--color-accent-dim);
    --accent-light: var(--color-accent-dim);
    --green: var(--color-success);
    --amber: var(--color-warn);
    --red: var(--color-danger);
    --blue: var(--color-info);
    --text-1: var(--color-text-1);
    --text-2: var(--color-text-2);
    --text-3: var(--color-text-3);
    --surface: var(--color-surface);
    --surface-hover: var(--color-surface-hover);
    --surface-1: var(--color-surface-1);
    --surface-2: var(--color-surface-2);
    --card: var(--color-card);
    --card-solid: var(--color-card-solid);
    --border: var(--color-border);
    --border-md: var(--color-border-strong);

    /* Legacy spacing aliases - nu Canva-værdier (ikke længere pixel-perfect fastlåst) */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);  /* 14px → 18px: alle gamle bv-card får ny padding */
    --space-lg: var(--space-5);  /* 20px → 24px */
    --space-xl: var(--space-7);  /* 32px → 44px */

    /* Legacy radius aliases */
    --r-sm: var(--radius-sm);
    --r-md: var(--radius-md);
    --r-lg: var(--radius-lg);
    --r-xl: var(--radius-xl);
    --r: var(--radius-lg);   /* generisk default-radius = 18px, ENS m. tokens.css --r:18 (var radius-md=16) */
    --r-full: 50%;
    --r-p: 18px;             /* ENS m. tokens.css --r-p:18 (var 24) */

    /* Legacy shadow aliases */
    --sh-sm: var(--shadow-sm);
    --sh-md: var(--shadow-md);

    /* Legacy type aliases (kept at original rem values for visual parity) */
    --text-xs: 0.68rem;
    --text-sm: 0.78rem;
    --text-md: 0.88rem;
    --text-lg: 1.1rem;
    --text-xl: 1.45rem;
    --text-2xl: 1.85rem;

    /* Common legacy */
    --transition: var(--motion-base);
    --color-on-dark: #fff;
    --color-on-gold: #000;
    --color-gold: #ffd700;
    --color-coin: #ffd700;
    --color-medal-gold: #FFD700;
    --color-medal-silver: #C0C0C0;
    --color-medal-bronze: #CD7F32;
    --color-streak: #ff922b;
    --color-danger-text: var(--color-danger);
    --color-overlay: rgba(0, 0, 0, 0.6);
}

/* ── LIGHT THEME OVERRIDES ─────────────────────────────────── */
[data-theme="light"] {
    --color-bg: #fafbff;                            /* næsten hvid, subtilt periwinkle */
    --color-bg-tint-1: rgba(90, 107, 124, 0.10);    /* neutral accent-glød (skin → kobolt) */
    --color-bg-tint-2: rgba(90, 107, 124, 0.10);    /* neutral glød */
    --color-surface: rgba(15, 23, 42, 0.05);
    --color-surface-hover: rgba(15, 23, 42, 0.09);
    --color-card: #ffffff;                          /* pure white cards pop mere */
    --color-card-solid: #ffffff;
    --color-surface-1: #ffffff;                     /* solid widget-card base - canvas phoner-screen følger app light/dark */
    --color-surface-2: #f3f5fa;                     /* nested/elevated controls - let kølig grå mod hvidt kort */
    --color-border: rgba(15, 23, 42, 0.1);
    --color-border-strong: rgba(15, 23, 42, 0.18);

    --color-text-1: #0f172a;                       /* dybere slate-sort, højere kontrast */
    --color-text-2: #475569;
    --color-text-3: #5B6678;                       /* AA-fix: var #94a3b8 (2.56:1) brød WCAG paa smaa labels (planner/hrm) -> 5.17:1 paa app-bg */

    /* NEUTRAL BASE (lys) — grafit, ikke kobolt. Skinnet overstyrer. */
    --color-accent: #5A6B7C;
    --color-accent-hover: #6E8092;
    --color-accent-dim: rgba(90, 107, 124, 0.09);
    --color-accent-soft: rgba(90, 107, 124, 0.16);
    --accent-rgb: 90, 107, 124;
    --pop-rgb: 90, 107, 124;
    --success-rgb: 90, 107, 124;
    --danger-rgb: 90, 107, 124;
    --color-success: #5A6B7C;
    --color-success-bg: rgba(90, 107, 124, 0.11);
    --color-warn: #8A8170;
    --color-warn-bg: rgba(138, 129, 112, 0.11);
    --color-danger: #8A6B6B;
    --color-danger-bg: rgba(138, 107, 107, 0.09);
    --color-info: #5A6B7C;
    --color-info-bg: rgba(90, 107, 124, 0.09);

    --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   A/B TOGGLE - data-visual="classic" på <html> genopretter
   det gamle, mere kompakte udseende (før Canva-pass).
═══════════════════════════════════════════════════════════════ */
[data-visual="classic"] {
    --space-4: 14px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.22);

    --color-surface: rgba(255, 255, 255, 0.06);
    --color-card: rgba(30, 36, 52, 0.75);
    --color-border: rgba(255, 255, 255, 0.09);
    --color-bg: #13171e;

    --space-md: 14px;
}
[data-visual="classic"][data-theme="light"] {
    --color-surface: rgba(0, 0, 0, 0.04);
    --color-card: rgba(255, 255, 255, 0.92);
    --color-border: rgba(0, 0, 0, 0.09);
    --color-bg: #f4f5f7;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ── Reduced-motion friendly ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 1ms linear;
        --motion-base: 1ms linear;
        --motion-slow: 1ms linear;
    }
}

/* ── A11Y-FIX 2026-05-27 (a11y-audit #3): iOS-zoom-fix ──────────
   iOS Safari auto-zoomer på input-fokus hvis font-size < 16px.
   På pointer:coarse devices (touch) tvinger vi 16px. Desktop får
   den oprindelige font-size fra component-CSS. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea {
        font-size: 16px;
    }
}