/* ============================================================
   badmintonline.nl — Design tokens
   ============================================================ */

/* --------------------------------------------------------------
   Licht thema (standaard)
   -------------------------------------------------------------- */
:root {
    /* ── Huisstijl ── */
    --color-brand:          #333333;
    --color-brand-dark:     #1a1a1a;
    --color-brand-light:    #f0f0f0;
    --color-white:          #ffffff;

    /* ── Accentkleuren per domein ── */
    --color-accent-nieuws:      #333333;   /* neutraal  — nieuws / eredivisie */
    --color-accent-video:       #e63946;   /* rood      — video */
    --color-accent-kennisbank:  #7a4bd9;   /* paars     — kennisbank */
    --color-accent-spelers:     #1e68d6;   /* blauw     — spelers */
    --color-accent-clubs:       #2fa36b;   /* groen     — clubs */

    /* Lichte varianten (voor achtergronden) */
    --color-accent-nieuws-light:     #f0f0f0;
    --color-accent-video-light:      #fdeaec;
    --color-accent-kennisbank-light: #f0eaff;
    --color-accent-spelers-light:    #e8f0fc;
    --color-accent-clubs-light:      #e8f7ef;

    /* Donkere varianten (voor hover) */
    --color-accent-nieuws-dark:     #111111;
    --color-accent-video-dark:      #c0202e;
    --color-accent-kennisbank-dark: #5e35b1;
    --color-accent-spelers-dark:    #1550a8;
    --color-accent-clubs-dark:      #1f7a4e;

    /* ── Oranje — spaarzaam voor CTA's en aandachtsblokken ── */
    --color-cta:            #ff6600;
    --color-cta-dark:       #cc5200;
    --color-cta-light:      #fff2e8;
    --color-cta-text:       #ffffff;

    /* ── Tekst & links ── */
    --color-text:           #333333;
    --color-text-secondary: #555555;
    --color-text-tertiary:  #888888;
    --color-text-inverse:   #ffffff;
    --color-text-link:      #333333;
    --color-text-link-hover:#000000;

    /* ── Achtergronden ── */
    --color-bg:             #fafafa;
    --color-bg-secondary:   #eeeeee;
    --color-bg-tertiary:    #e5e5e5;
    --color-bg-inverse:     #333333;

    /* ── Randen ── */
    --color-border:         #e0e0e0;
    --color-border-strong:  #bbbbbb;

    /* ── Statussen ── */
    --color-breaking:       #e63946;
    --color-breaking-bg:    #fdeaec;
    --color-new:            #2fa36b;

    /* ── Header ── */
    --color-header-bg:           #eeeeee;
    --color-header-border:       #d8d8d8;
    --color-header-text:         #333333;
    --color-header-nav-text:     rgba(51,51,51,.75);
    --color-header-nav-hover:    #111111;
    --color-header-nav-hover-bg: rgba(0,0,0,.07);
    --color-header-logo:         dark;

    --color-sidebar-bg:          #eeeeee;
    --color-sidebar-border:      rgba(0,0,0,.08);
    --color-sidebar-text:        rgba(51,51,51,.75);
    --color-sidebar-text-hover:  #111111;
    --color-sidebar-hover-bg:    rgba(0,0,0,.07);
    --color-sidebar-social:      rgba(51,51,51,.35);
    --color-sidebar-link-secondary:  rgba(51,51,51,.55);
    --color-sidebar-tile-bg:         rgba(0,0,0,.06);
    --color-sidebar-tile-border:     rgba(0,0,0,.1);
    --color-sidebar-tile-text:       rgba(51,51,51,.75);
    --color-sidebar-tile-hover-bg:   rgba(0,0,0,.12);
    --color-sidebar-tile-hover-text: #111111;

    /* ── Footer ── */
    --color-footer-bg:      #e0e0e0;
    --color-footer-text:    #555555;
    --color-footer-heading: #222222;
    --color-footer-border:  #cccccc;
    --color-footer-link:    #555555;
    --color-footer-link-hover: #111111;

    /* ── Kaarten ── */
    --color-card-bg:              #ffffff;
    --color-card-border:          transparent;
    --color-card-border-hover:    #e0e0e0;
    --color-card-hover:           #f7f7f7;

    /* ── Schaduwen ── */
    --shadow-sm:            0 1px 3px rgba(0,0,0,.06);
    --shadow-md:            0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:            0 8px 24px rgba(0,0,0,.10);

    /* ── Typografie ── */
    --font-sans:            'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:           Georgia, 'Times New Roman', serif;
    --font-mono:            'Courier New', Courier, monospace;

    --font-size-xs:         0.75rem;
    --font-size-sm:         0.875rem;
    --font-size-base:       1rem;
    --font-size-md:         1.125rem;
    --font-size-lg:         1.25rem;
    --font-size-xl:         1.5rem;
    --font-size-2xl:        1.875rem;
    --font-size-3xl:        2.25rem;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-bold:     700;

    --line-height-tight:    1.25;
    --line-height-snug:     1.4;
    --line-height-base:     1.6;
    --line-height-loose:    1.8;

    /* ── Spacing ── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;

    /* ── Layout ── */
    --container-max:        1200px;
    --container-padding:    var(--space-6);
    --header-height:        64px;
    --header-height-mobile: 56px;

    /* ── Rondingen ── */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-full:  9999px;

    /* ── Transities ── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* ── Z-index ── */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-header:     300;
    --z-overlay:    400;
    --z-modal:      500;
    --z-toast:      600;
}

/* --------------------------------------------------------------
   Donker thema
   -------------------------------------------------------------- */
[data-theme="dark"] {
    --color-brand:              #e0e0e0;
    --color-brand-light:        #2a2a2a;

    --color-accent-nieuws:      #e0e0e0;
    --color-accent-video:       #f05060;
    --color-accent-kennisbank:  #9b6fe8;
    --color-accent-spelers:     #4a8ae8;
    --color-accent-clubs:       #3dbb7e;

    --color-accent-nieuws-light:     #2a2a2a;
    --color-accent-video-light:      #2a0e10;
    --color-accent-kennisbank-light: #1e1030;
    --color-accent-spelers-light:    #0e1c30;
    --color-accent-clubs-light:      #0e2018;

    --color-accent-nieuws-dark:     #ffffff;
    --color-accent-video-dark:      #e63946;
    --color-accent-kennisbank-dark: #7a4bd9;
    --color-accent-spelers-dark:    #1e68d6;
    --color-accent-clubs-dark:      #2fa36b;

    --color-cta:            #ff7722;
    --color-cta-dark:       #ff6600;
    --color-cta-light:      #2a1800;
    --color-cta-text:       #ffffff;

    --color-text:           #eeeeee;
    --color-text-secondary: #aaaaaa;
    --color-text-tertiary:  #777777;
    --color-text-inverse:   #333333;
    --color-text-link:      #e0e0e0;
    --color-text-link-hover:#ffffff;

    --color-bg:             #131313;
    --color-bg-secondary:   #1e1e1e;
    --color-bg-tertiary:    #272727;
    --color-bg-inverse:     #f0f0f0;

    --color-border:         #333333;
    --color-border-strong:  #555555;

    --color-breaking:       #f05060;
    --color-breaking-bg:    #2a0e10;
    --color-new:            #3dbb7e;

    --color-header-bg:      #1a1a1a;
    --color-header-border:  #333333;
    --color-header-text:    #eeeeee;
    --color-header-nav-text:     rgba(238,238,238,.75);
    --color-header-nav-hover:    #ffffff;
    --color-header-nav-hover-bg: rgba(255,255,255,.1);
    --color-nav-hover:      #ffffff;
    --color-nav-active:     #ffffff;

    --color-sidebar-bg:          #1a1a1a;
    --color-sidebar-border:      rgba(255,255,255,.1);
    --color-sidebar-text:        rgba(238,238,238,.7);
    --color-sidebar-text-hover:  #ffffff;
    --color-sidebar-hover-bg:    rgba(255,255,255,.1);
    --color-sidebar-social:      rgba(255,255,255,.65);
    --color-sidebar-link-secondary:  rgba(255,255,255,.75);

    --color-sidebar-tile-bg:         rgba(255,255,255,.15);
    --color-sidebar-tile-border:     rgba(255,255,255,.08);
    --color-sidebar-tile-text:       rgba(255,255,255,.75);
    --color-sidebar-tile-hover-bg:   rgba(255,255,255,.25);
    --color-sidebar-tile-hover-text: #ffffff;

    --color-footer-bg:      #0d0d0d;
    --color-footer-text:    #777777;
    --color-footer-heading: #eeeeee;
    --color-footer-border:  #222222;
    --color-footer-link:    #777777;
    --color-footer-link-hover: #eeeeee;

    --color-card-bg:              #1e1e1e;
    --color-card-border:          transparent;
    --color-card-border-hover:    #333333;
    --color-card-hover:           #2a2a2a;

    --shadow-sm:            0 1px 3px rgba(0,0,0,.4);
    --shadow-md:            0 4px 12px rgba(0,0,0,.5);
    --shadow-lg:            0 8px 24px rgba(0,0,0,.6);
}

/* --------------------------------------------------------------
   Automatisch donker thema via systeemvoorkeur
   -------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-brand:              #e0e0e0;
        --color-brand-light:        #2a2a2a;

        --color-accent-nieuws:      #e0e0e0;
        --color-accent-video:       #f05060;
        --color-accent-kennisbank:  #9b6fe8;
        --color-accent-spelers:     #4a8ae8;
        --color-accent-clubs:       #3dbb7e;

        --color-accent-nieuws-light:     #2a2a2a;
        --color-accent-video-light:      #2a0e10;
        --color-accent-kennisbank-light: #1e1030;
        --color-accent-spelers-light:    #0e1c30;
        --color-accent-clubs-light:      #0e2018;

        --color-accent-nieuws-dark:     #ffffff;
        --color-accent-video-dark:      #e63946;
        --color-accent-kennisbank-dark: #7a4bd9;
        --color-accent-spelers-dark:    #1e68d6;
        --color-accent-clubs-dark:      #2fa36b;

        --color-cta:            #ff7722;
        --color-cta-dark:       #ff6600;
        --color-cta-light:      #2a1800;
        --color-cta-text:       #ffffff;

        --color-text:           #eeeeee;
        --color-text-secondary: #aaaaaa;
        --color-text-tertiary:  #777777;
        --color-text-inverse:   #333333;
        --color-text-link:      #e0e0e0;
        --color-text-link-hover:#ffffff;

        --color-bg:             #131313;
        --color-bg-secondary:   #1e1e1e;
        --color-bg-tertiary:    #272727;
        --color-bg-inverse:     #f0f0f0;

        --color-border:         #333333;
        --color-border-strong:  #555555;

        --color-breaking:       #f05060;
        --color-breaking-bg:    #2a0e10;
        --color-new:            #3dbb7e;

        --color-header-bg:           #1a1a1a;
        --color-header-border:       #333333;
        --color-header-text:         #eeeeee;
        --color-header-nav-text:     rgba(238,238,238,.75);
        --color-header-nav-hover:    #ffffff;
        --color-header-nav-hover-bg: rgba(255,255,255,.1);
        --color-header-logo:         light;

        --color-sidebar-bg:          #1a1a1a;
        --color-sidebar-border:      rgba(255,255,255,.1);
        --color-sidebar-text:        rgba(238,238,238,.7);
        --color-sidebar-text-hover:  #ffffff;
        --color-sidebar-hover-bg:    rgba(255,255,255,.1);
        --color-sidebar-social:      rgba(255,255,255,.65);
        --color-sidebar-link-secondary:  rgba(255,255,255,.75);

        --color-sidebar-tile-bg:         rgba(255,255,255,.07);
        --color-sidebar-tile-border:     rgba(255,255,255,.08);
        --color-sidebar-tile-text:       rgba(255,255,255,.75);
        --color-sidebar-tile-hover-bg:   rgba(255,255,255,.15);
        --color-sidebar-tile-hover-text: #ffffff;

        --color-footer-bg:      #0d0d0d;
        --color-footer-text:    #777777;
        --color-footer-heading: #eeeeee;
        --color-footer-border:  #222222;
        --color-footer-link:    #777777;
        --color-footer-link-hover: #eeeeee;

        --color-card-bg:        #1e1e1e;
        --color-card-border:    transparent;
        --color-card-hover:     #2a2a2a;

        --shadow-sm:            0 1px 3px rgba(0,0,0,.4);
        --shadow-md:            0 4px 12px rgba(0,0,0,.5);
        --shadow-lg:            0 8px 24px rgba(0,0,0,.6);
    }
}