/*
 * Ontwerpwaarden (tokens) voor Over Zorgpeil.
 * Kleuren volgen de referentiesite over.zorgpeil.nl (blauw #079BDC, groen
 * #1DF07C, teal #0092B2, oranje #FF9311), maar zijn voor tekst bijgesteld
 * naar tinten die WCAG AA halen: wit op --color-primary/--color-green >= 3:1
 * voor grote tekst, wit op --color-teal en donkere tekst op oranje >= 4,5:1.
 * Lettertypes zijn zelf gehost (zie fonts.css), dus er is nooit een externe
 * font-src in de Content-Security-Policy nodig.
 */

:root {
    --color-primary: #0578b5;
    --color-primary-dark: #045a88;
    --color-green: #0f9d67;
    --color-teal: #007a94;
    --color-teal-dark: #005f73;
    --color-accent: #ff9311;
    --color-accent-dark: #f08200;

    --color-navy: #263238;
    --color-text: #4a5560;
    --color-text-muted: #56636d;
    --color-white: #ffffff;
    --color-bg: #ffffff;
    --color-bg-muted: #f4f8fa;
    --color-tint: #dceff4;
    --color-border: #dde6ea;
    --color-footer: #1e2a30;
    --color-footer-text: #c9d6db;

    --color-success-bg: #e7f6ec;
    --color-success-text: #1e7a3d;
    --color-error-bg: #fdecec;
    --color-error-text: #b3261e;

    --gradient-brand: linear-gradient(310deg, #0578b5 30%, #0f9d67 85%);

    --font-heading: 'Montserrat', 'Asap', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Asap', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --container-width: 1200px;
    --container-width-narrow: 820px;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;

    --radius: 10px;
    --radius-sm: 6px;
    --radius-pill: 999px;

    --shadow-card: 0 4px 24px rgba(38, 50, 56, 0.1);
    --shadow-hover: 0 10px 30px rgba(38, 50, 56, 0.16);

    --header-height: 76px;
}