/* ============================================================
   Design tokens — magnusnygreen.dk
   Single source of truth for color, type, spacing, etc.
   Change a value here and it updates across the whole site.
   All color pairings used for text meet WCAG 2.1 AA contrast.
   ============================================================ */

:root {
    /* --- Brand colors --- */
    --c-primary:      #0d3b54; /* deep blue — brand surfaces, headings accents */
    --c-primary-700:  #082a3d; /* darker primary (gradients, hovers) */
    --c-primary-300:  #2f6f8f; /* lighter primary — DECORATIVE only (too low contrast for text on dark) */
    --c-accent:       #c2410c; /* warm burnt-orange — CTAs. White text = 5.18:1 (AA) */
    --c-accent-700:   #9a330a; /* CTA hover */

    /* --- Neutrals --- */
    --c-ink:     #0f1f2e; /* headings / strongest text (15:1 on white) */
    --c-text:    #2b3a4a; /* body text (10:1 on white) */
    --c-muted:   #566473; /* secondary text (5.4:1 on white, AA) */
    --c-bg:      #ffffff;
    --c-bg-alt:  #f4f7fa; /* alternating section background */
    --c-bg-dark: #0d3b54; /* dark sections (white text on top) */
    --c-border:  #e1e7ee;

    /* --- States --- */
    --c-success:    #1f7a4d;
    --c-success-bg: #e8f5ee;
    --c-error:      #b42318;
    --c-error-bg:   #fdeceb;

    /* On-dark text */
    --c-on-dark:        #ffffff;
    --c-on-dark-muted:  #c5d6e0; /* 7.95:1 on --c-primary, AA */

    /* --- Typography --- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Fluid type scale (clamp = min, preferred, max) */
    --fs-xs:   0.8125rem;  /* 13px */
    --fs-sm:   0.9375rem;  /* 15px */
    --fs-base: 1.0625rem;  /* 17px — comfortable body */
    --fs-md:   1.1875rem;  /* 19px */
    --fs-lg:   clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
    --fs-xl:   clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
    --fs-2xl:  clamp(2.1rem, 1.3rem + 3.6vw, 3.4rem);

    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.65;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;

    /* --- Spacing scale (8px base) --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* --- Layout --- */
    --container-max: 1120px;
    --container-narrow: 760px;

    /* --- Radius --- */
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(15, 31, 46, 0.06);
    --shadow:    0 4px 16px rgba(15, 31, 46, 0.08);
    --shadow-lg: 0 16px 40px rgba(13, 59, 84, 0.14);

    /* --- Motion --- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur:  180ms;
}