/* ══════════════════════════════════════════════════════════════════
   Design Tokens — Kleuren, spacing, radius, shadows, typography
   ══════════════════════════════════════════════════════════════════ */

/* ── Thema-kleuren per omgeving (CSS custom properties) ── */
:root,
[data-env="power"] {
    --pr-color:        #1C4220;
    --pr-color-light:  #2D6B3F;
    --pr-color-text:   #1C4220;
    --pr-gradient:     linear-gradient(135deg, #2D6B3F 0%, #1C4220 100%);
    --pr-shadow:       rgba(28,66,32,0.35);
    --pr-shadow-light: rgba(28,66,32,0.2);
    --pr-nav-bg:       #1C4220;
    --pr-font-heading: 'Plus Jakarta Sans', sans-serif;
    --pr-font-body:    'Plus Jakarta Sans', sans-serif;

    /* Tekst kleur tokens (WCAG AA compliant) */
    --text-primary:   #1a202c;
    --text-secondary: #475569;
    --text-tertiary:  #64748b;
    --text-muted:     #64748b;

    /* Spacing tokens (8-point grid) */
    --space-2xs: 4px;
    --space-xxs: 6px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 40px;
    --space-3xl: 60px;
    --page-gutter: 32px;

    /* Radius tokens */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Elevation tokens */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);

    /* Type scale (Minor Third 1.2) */
    --text-xs:   0.694rem;
    --text-sm:   0.833rem;
    --text-base: 1rem;
    --text-md:   1.2rem;
    --text-lg:   1.44rem;
    --text-xl:   1.728rem;
    --text-2xl:  2.074rem;
    --text-3xl:  2.488rem;

    /* Letter-spacing tokens */
    --tracking-tight: -0.01em;
    --tracking-wide:  0.06em;
}
[data-env="post"] {
    --pr-color:        #26A1E5;
    --pr-color-light:  #87C2E8;
    --pr-color-text:   #1a6fa0;
    --pr-gradient:     linear-gradient(135deg, #26A1E5 0%, #122E61 100%);
    --pr-shadow:       rgba(38,161,229,0.35);
    --pr-shadow-light: rgba(38,161,229,0.2);
    --pr-nav-bg:       #122E61;
    --pr-font-heading: 'Oswald', sans-serif;
    --pr-font-body:    'Lato', sans-serif;
}
[data-env="twt"] {
    --pr-color:        #0891b2;
    --pr-color-light:  #22d3ee;
    --pr-color-text:   #0e7490;
    --pr-gradient:     linear-gradient(135deg, #06b6d4 0%, #064e5e 100%);
    --pr-shadow:       rgba(8,145,178,0.35);
    --pr-shadow-light: rgba(8,145,178,0.2);
    --pr-nav-bg:       #064e5e;
    --pr-font-heading: 'Plus Jakarta Sans', sans-serif;
    --pr-font-body:    'Plus Jakarta Sans', sans-serif;
}