/*
 * Wheel Warriors Core – design-tokens.
 *
 * Eén bron voor kleuren, typografie, afstanden, afrondingen, schaduwen en
 * beweging. Regel: een token bestaat alleen als de core hem zelf gebruikt of
 * een omgezette View hem nodig heeft. Gebruik in Views uitsluitend de tokens
 * uit het blok "PUBLIEK". Ontbreekt een waarde? Voeg hem hier toe in plaats
 * van een letterlijke waarde in een View te zetten.
 *
 * Breakpoints (custom properties werken niet in @media, dus als afspraak):
 *   1024px  grote tablet / kleine laptop
 *    900px  tablet
 *    650px  telefoon – hier schakelt de core om
 *    400px  smalle telefoon
 */

:root {
    /* ==================================================================
       PUBLIEK – gebruik deze in Views
       ================================================================== */

    /* ---------- Merkkleuren ---------- */
    --ww-color-navy: #0d1a35;          /* dé donkere kleur: koppen, tekst, donkere vlakken */
    --ww-color-blue: #1a5eaa;          /* links, accenten, iconen */
    --ww-color-orange: #ef7900;        /* primaire knoppen, kickers */
    --ww-color-orange-light: #ff8a2b;  /* alleen als eindstop van --ww-gradient-orange */

    /* ---------- Functionele kleuren ---------- */
    --ww-color-success: #1f9d57;
    --ww-color-danger: #c62828;

    /* ---------- Sponsor-tiers ---------- */
    --ww-tier-warrior: #e8dcc0;
    --ww-tier-warrior-text: #c9b78a;
    --ww-tier-goud: #c9a000;
    --ww-tier-zilver: #6b7b8c;
    --ww-tier-brons: #cd7f32;
    --ww-tier-vriend: var(--ww-color-orange);

    /* ---------- Partner-categorieën (zie mb.ww_core_partner_categorie) ---------- */
    --ww-partner-gemeente: #3a57a8;
    --ww-partner-sportlocatie: #119db0;
    --ww-partner-onderwijs: var(--ww-color-blue);
    --ww-partner-zorg: var(--ww-color-success);
    --ww-partner-bedrijven: #4d5e80;
    --ww-partner-maatschappelijk: var(--ww-color-orange);
    --ww-partner-sponsor: #7a4fcb;
    --ww-partner-evenement: #e0533d;
    --ww-partner-cultuur: #d24e86;
    --ww-partner-partner: var(--ww-color-blue);

    /* ---------- Tekstkleuren (licht vlak) ---------- */
    --ww-color-text: #3c4356;          /* lopende tekst */
    --ww-color-muted-strong: #68748a;  /* secundaire tekst, breadcrumb, tags */
    --ww-color-muted: #8a90a0;         /* labels, meta, hulptekst */
    --ww-color-icon-muted: #c0c8d4;    /* scheidingstekens, nummers, decoratieve iconen */

    /* ---------- Tekstkleuren (donker vlak) ---------- */
    --ww-color-on-dark-soft: rgba(255, 255, 255, 0.8);   /* intro/copy op navy */
    --ww-color-on-dark-muted: rgba(255, 255, 255, 0.6);  /* labels/meta op navy */

    /* ---------- Vlakken en randen ---------- */
    --ww-color-surface: #ffffff;       /* kaarten, inputs */
    --ww-color-soft: #fafbfd;          /* zachte vlakken: iconvakken, tags, hover */
    --ww-color-page: #f8f7f4;          /* pagina-achtergrond = site-achtergrond (Astra body), chips */
    --ww-color-border: #e8eaf0;        /* standaardrand */

    /* ---------- Transparante varianten ---------- */
    --ww-navy-a06: rgba(13, 26, 53, 0.06);   /* zachte lijn */
    --ww-navy-a08: rgba(13, 26, 53, 0.08);   /* lijn, telling-bolletje */
    --ww-navy-a10: rgba(13, 26, 53, 0.10);
    --ww-navy-a12: rgba(13, 26, 53, 0.12);
    --ww-navy-a16: rgba(13, 26, 53, 0.16);
    --ww-navy-a90: rgba(13, 26, 53, 0.90);   /* overlay */

    --ww-blue-a08: rgba(26, 94, 170, 0.08);  /* tint, hover, focus */
    --ww-blue-a28: rgba(26, 94, 170, 0.28);  /* hover-rand */
    --ww-blue-a38: rgba(26, 94, 170, 0.38);  /* focus-outline, hero-gloed */

    --ww-orange-a05: rgba(239, 121, 0, 0.05);
    --ww-orange-a10: rgba(239, 121, 0, 0.10);
    --ww-orange-a22: rgba(239, 121, 0, 0.22);
    --ww-orange-a30: rgba(239, 121, 0, 0.30);  /* blob, hover-rand oranje */

    --ww-white-a04: rgba(255, 255, 255, 0.04);
    --ww-white-a07: rgba(255, 255, 255, 0.07);  /* glas-vlak op navy */
    --ww-white-a10: rgba(255, 255, 255, 0.10);
    --ww-white-a14: rgba(255, 255, 255, 0.14);  /* glas-rand op navy */
    --ww-white-a16: rgba(255, 255, 255, 0.16);
    --ww-white-a22: rgba(255, 255, 255, 0.22);
    --ww-white-a42: rgba(255, 255, 255, 0.42);

    /* ---------- Verlopen (kies deze, niet losse tussenkleuren) ---------- */
    --ww-gradient-brand: linear-gradient(90deg, var(--ww-color-blue), var(--ww-color-orange));                       /* accentstreep */
    --ww-gradient-orange: linear-gradient(135deg, var(--ww-color-orange), var(--ww-color-orange-light));            /* primaire knop */
    --ww-gradient-navy: linear-gradient(135deg, var(--ww-color-navy) 0%, var(--ww-color-navy-mid) 48%, var(--ww-color-navy-bright) 100%); /* hero */
    --ww-gradient-navy-soft: linear-gradient(135deg, var(--ww-color-navy), var(--ww-color-navy-2));                /* CTA, donkere kaart */
    --ww-gradient-tint: linear-gradient(135deg, var(--ww-blue-a08), var(--ww-orange-a05));                          /* iconvak, lege staat */
    --ww-gradient-blob: linear-gradient(135deg, var(--ww-orange-a30), rgba(26, 94, 170, 0.06));                     /* hoekblob */
    --ww-gradient-photo-overlay: linear-gradient(105deg, rgba(13, 26, 53, 0.96) 30%, rgba(19, 42, 84, 0.72) 70%, rgba(26, 94, 170, 0.45) 100%); /* foto-hero */

    /* ---------- Font Awesome duotone ---------- */
    --ww-fa-primary: var(--ww-color-blue);
    --ww-fa-secondary: var(--ww-color-orange);
    --ww-fa-secondary-opacity: 0.9;

    /* ---------- Typografie ---------- */
    --ww-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ww-font-weight-regular: 400;
    --ww-font-weight-medium: 500;
    --ww-font-weight-semibold: 600;
    --ww-font-weight-bold: 700;
    --ww-font-weight-extrabold: 800;
    --ww-font-weight-black: 900;

    /* Tekstschaal – kies altijd één van deze stappen. */
    --ww-text-2xs: 8px;       /* mobiele kickers/badges */
    --ww-text-label: 9.5px;   /* stat-labels, meta, badges */
    --ww-text-xs: 10px;       /* kickers, hero-label, hulptekst */
    --ww-text-caption: 11px;  /* knoppen, tags */
    --ww-text-sm: 12px;       /* kleine tekst, tabs, eyebrow */
    --ww-text-base: 13px;     /* breadcrumb, chips, kaarttekst */
    --ww-text-md: 14px;       /* copy, intro */
    --ww-text-lg: 16px;       /* h4, grote body, empty-titel */
    --ww-text-h3: 17px;       /* kaarttitels */
    --ww-text-xl: 20px;       /* kleine koppen */
    --ww-text-2xl: 26px;      /* sectiekop mobiel, stat-tegel */
    --ww-text-3xl: 36px;      /* sectiekop desktop */
    --ww-text-title: clamp(var(--ww-text-2xl), 3.5vw, var(--ww-text-3xl)); /* h2 */
    --ww-text-display: clamp(40px, 5.4vw, 58px);                           /* hero h1 (mobiel: zie onder) */

    --ww-line-tight: 1.08;    /* grote titels */
    --ww-line-snug: 1.2;      /* h3, badges, knoppen */
    --ww-line-relaxed: 1.7;   /* copy */
    --ww-line-loose: 1.8;     /* intro-tekst */

    --ww-tracking-tight: -0.025em;   /* grote titels */
    --ww-tracking-display: -0.035em; /* hero h1 */
    --ww-tracking-caps-sm: 0.07em;   /* knoppen, meta */
    --ww-tracking-caps: 0.14em;      /* badges, labels, hero-label */
    --ww-tracking-caps-lg: 0.18em;   /* kickers, eyebrow */

    /* ---------- Layout en afstanden ---------- */
    --ww-content-width: 1180px;
    --ww-content-width-narrow: 820px;
    --ww-page-gutter: 24px;
    --ww-sticky-top: 0px;

    --ww-space-1: 4px;
    --ww-space-2: 8px;
    --ww-space-3: 12px;
    --ww-space-4: 16px;
    --ww-space-5: 20px;
    --ww-space-6: 24px;
    --ww-space-7: 32px;
    --ww-space-8: 40px;
    --ww-space-section: 58px;
    --ww-space-page-end: 68px;

    /* ---------- Afrondingen ---------- */
    --ww-radius-xs: 8px;
    --ww-radius-sm: 11px;
    --ww-radius-md: 14px;
    --ww-radius-lg: 18px;
    --ww-radius-xl: 22px;
    --ww-radius-2xl: 26px;
    --ww-radius-pill: 999px;

    /* ---------- Schaduwen en focus ---------- */
    --ww-shadow-soft: 0 8px 22px rgba(13, 26, 53, 0.05);
    --ww-shadow-card: 0 10px 28px rgba(13, 26, 53, 0.07);
    --ww-shadow-card-hover: 0 16px 34px rgba(13, 26, 53, 0.11);
    --ww-shadow-lift: 0 14px 38px rgba(13, 26, 53, 0.10);
    --ww-shadow-strong: 0 16px 42px rgba(13, 26, 53, 0.18);
    --ww-shadow-modal: 0 40px 90px rgba(0, 0, 0, 0.5);
    --ww-shadow-button: 0 8px 20px rgba(239, 121, 0, 0.28);
    --ww-shadow-float: 0 12px 28px rgba(0, 0, 0, 0.22);
    --ww-focus-ring: 0 0 0 3px var(--ww-blue-a08);
    --ww-focus-outline: 3px solid var(--ww-blue-a38);
    --ww-focus-outline-offset: 4px;

    /* ---------- Beweging ---------- */
    --ww-transition-fast: 180ms ease;
    --ww-transition-normal: 220ms ease;
    --ww-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ww-blur: 8px;

    /* ---------- Componentmaten ---------- */
    --ww-control-height: 46px;      /* knoppen, inputs (mobiel 42) */
    --ww-control-height-sm: 38px;
    --ww-icon-box-size: 46px;
    --ww-icon-box-size-sm: 38px;
    --ww-icon-box-size-lg: 62px;

    /* ==================================================================
       INTERN – alleen als tussenstop van een verloop; niet in Views
       ================================================================== */
    --ww-color-navy-mid: #102141;     /* --ww-gradient-navy 48% */
    --ww-color-navy-bright: #153866;  /* --ww-gradient-navy 100% */
    --ww-color-navy-2: #16284f;       /* --ww-gradient-navy-soft 100% */
    --ww-text-display-sm: clamp(30px, 10vw, 36px);

    /* ==================================================================
       VEROUDERD – alleen zodat nog niet omgezette Views blijven werken.
       Vervang bij het omzetten door het token achter de pijl.
       ================================================================== */
    --ww-navy: var(--ww-color-navy);                 /* → --ww-color-navy */
    --ww-dark: var(--ww-color-navy);                 /* → --ww-color-navy */
    --ww-ink: var(--ww-color-navy);                  /* → --ww-color-navy */
    --ww-navy2: var(--ww-color-navy-2);              /* → --ww-gradient-navy-soft */
    --ww-blue: var(--ww-color-blue);                 /* → --ww-color-blue */
    --ww-blue-licht: #5b9bd8;                        /* → --ww-color-blue */
    --ww-color-blue-light: #5b9bd8;                  /* → --ww-color-blue */
    --ww-orange: var(--ww-color-orange);             /* → --ww-color-orange */
    --ww-orange-licht: var(--ww-color-orange-light); /* → --ww-gradient-orange */
    --ww-orange-soft: var(--ww-color-orange-light);  /* → --ww-gradient-orange */
    --ww-color-orange-pale: #ffa24d;                 /* → --ww-color-orange-light */
    --ww-tekst: var(--ww-color-text);                /* → --ww-color-text */
    --ww-text: var(--ww-color-text);                 /* → --ww-color-text */
    --ww-color-text-soft: var(--ww-color-muted-strong);  /* → --ww-color-muted-strong */
    --ww-color-text-cool: var(--ww-color-muted-strong);  /* → --ww-color-muted-strong */
    --ww-grijs: var(--ww-color-muted);               /* → --ww-color-muted */
    --ww-muted: var(--ww-color-muted-strong);        /* → --ww-color-muted-strong */
    --ww-color-muted-cool: var(--ww-color-muted);    /* → --ww-color-muted */
    --ww-soft: var(--ww-color-muted);                /* → --ww-color-muted */
    --ww-rand: var(--ww-color-border);               /* → --ww-color-border */
    --ww-border: var(--ww-color-border);             /* → --ww-color-border */
    --ww-line: var(--ww-navy-a08);                   /* → --ww-navy-a08 */
    --ww-color-line: var(--ww-navy-a08);             /* → --ww-navy-a08 */
    --ww-color-line-soft: var(--ww-navy-a06);        /* → --ww-navy-a06 */
    --ww-zacht: var(--ww-color-soft);                /* → --ww-color-soft */
    --ww-color-input: var(--ww-color-soft);          /* → --ww-color-soft */
    --ww-color-hover-tint: var(--ww-blue-a08);       /* → --ww-blue-a08 */
    --ww-color-gold: var(--ww-tier-warrior-text);    /* → --ww-tier-warrior-text */
    --ww-text-body: var(--ww-text-md);               /* → --ww-text-md */
    --ww-tracking-caps-md: var(--ww-tracking-caps);  /* → --ww-tracking-caps */
    --ww-content-width-wide: 1320px;                 /* → --ww-content-width */
    --ww-space-9: 48px;                              /* → --ww-space-8 */
}

@media (max-width: 650px) {
    :root {
        --ww-page-gutter: 12px;
        --ww-space-section: 36px;
        --ww-space-page-end: 38px;
        --ww-text-display: var(--ww-text-display-sm);
        --ww-control-height: 42px;
    }
}