/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Canonieke design-token-laag voor Sportlist 2.0. Bevat
 *                kleur-schalen, oppervlakken, typografie (fluid), spacing,
 *                border-radius, schaduwen, motion-tokens, z-index-schaal en
 *                legacy-aliassen voor de bestaande variabelen. Dit bestand is
 *                de bron van waarheid voor álle visuele waarden en wordt
 *                globaal geladen voor elk ander CSS-bestand.
 *
 *                Dit bestand definieert ENKEL tokens; het schrijft geen enkele
 *                rule naar elementen of componenten. De component-laag en
 *                pagina-laag consumeren de tokens via var(--token-naam).
 *
 * PATH         : wp-content/themes/sportlist/css/tokens.css
 *
 * DEPENDENCIES : Geen. Geladen als eerste CSS (dependency voor sportlist-style
 *                in functions.php sportlist_scripts()).
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *    1.  PRIMITIEVEN: KLEURENPALET (primary, accent, neutral, status)
 *    2.  SEMANTISCHE KLEUREN (brand, tekst, oppervlakken, randen)
 *    3.  TYPOGRAFIE (font-stack, fluid sizes, line-heights, weights)
 *    4.  SPACING (4-punts-schaal)
 *    5.  BORDER-RADIUS
 *    6.  SHADOW
 *    7.  MOTION (durations, easings)
 *    8.  Z-INDEX
 *    9.  LEGACY-ALIASSEN (backwards-compat met header.php :root{})
 *   10.  REDUCED MOTION GUARD
 *
 * @package Sportlist
 */

/* ============================================================
   1. PRIMITIEVEN: KLEURENPALET
   Ruwe paletwaarden. Gebruik in componenten bij voorkeur de
   semantische tokens uit sectie 2, niet deze primitieven.
   ============================================================ */

:root {
    /* Brand: primary (blauw) — 500 is de huidige --primary-color */
    --primary-50:  #e8efff;
    --primary-100: #c7d7ff;
    --primary-200: #9cb5f3;
    --primary-300: #6c92e8;
    --primary-400: #3e73d8;
    --primary-500: #004aad;
    --primary-600: #003f93;
    --primary-700: #003381;
    --primary-800: #002966;
    --primary-900: #00205a;

    /* Accent: amber — reviewscore, "vanaf"-prijzen, Pro-badges.
       500 = dezelfde waarde als de dashboard-notification-kleur. */
    --accent-50:  #fff6e5;
    --accent-100: #ffe3b3;
    --accent-200: #ffcf7a;
    --accent-300: #fabb52;
    --accent-400: #f6ad34;
    --accent-500: #f5a623;
    --accent-600: #d88e12;
    --accent-700: #c27f0a;
    --accent-800: #9a6306;
    --accent-900: #805200;

    /* Neutraal: tekst, oppervlakken, randen. */
    --neutral-0:   #ffffff;
    --neutral-50:  #f9fafb;
    --neutral-100: #f2f4f7;
    --neutral-200: #e6eaf0;
    --neutral-300: #ced4de;
    --neutral-400: #9aa3b1;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #101218;

    /* Status-utility: in lijn met dashboard.css (hardcoded by design). */
    --status-success: #27ae60;
    --status-warning: #e67e22;
    --status-error:   #c0392b;
    --status-info:    #2980b9;
}

/* ============================================================
   2. SEMANTISCHE KLEUREN
   Gebruik deze in nieuwe componenten — leesbaar en herbruikbaar.
   ============================================================ */

:root {
    /* Brand */
    --color-brand:          var(--primary-500);
    --color-brand-hover:    var(--primary-600);
    --color-brand-active:   var(--primary-700);
    --color-brand-subtle:   var(--primary-50);
    --color-brand-on:       var(--neutral-0);

    /* Accent */
    --color-accent:         var(--accent-500);
    --color-accent-hover:   var(--accent-600);
    --color-accent-subtle:  var(--accent-50);
    --color-accent-on:      var(--neutral-900);

    /* Tekst */
    --color-text:           var(--neutral-900);
    --color-text-muted:     var(--neutral-500);
    --color-text-faint:     var(--neutral-400);
    --color-text-inverse:   var(--neutral-0);
    --color-heading:        var(--primary-500); /* Sprint 1: unified van #084AF3 naar primary-500. Legacy --heading-color blijft onveranderd (zie sectie 9). */
    --color-link:           #2e69fe;
    --color-link-hover:     var(--primary-700);

    /* Oppervlakken */
    --color-surface:        var(--neutral-0);
    --color-surface-sunken: var(--neutral-50);
    --color-surface-raised: var(--neutral-0);
    --color-surface-muted:  var(--neutral-100);
    --color-overlay:        rgba(16, 18, 24, 0.55);
    --color-overlay-strong: rgba(16, 18, 24, 0.75);

    /* Randen */
    --color-border-subtle:  var(--neutral-100);
    --color-border-default: var(--neutral-200);
    --color-border-strong:  var(--neutral-300);
    --color-border-brand:   var(--primary-500);
    --color-focus-ring:     rgba(0, 74, 173, 0.28);
}

/* ============================================================
   3. TYPOGRAFIE
   Fluid-scale via clamp() — schaalt vloeiend tussen 360px en
   1280px viewport. Toepassing komt in latere sprints (component-
   en pagina-laag); dit bestand levert enkel de waarden.
   ============================================================ */

:root {
    /* Font-stacks */
    --font-sans:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Fluid type-scale (min / preferred / max) */
    --fs-display:  clamp(2rem,    1.4rem + 2.6vw, 3.5rem);  /* 32 → 56px — hero-h1 */
    --fs-h1:       clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);  /* 28 → 40px */
    --fs-h2:       clamp(1.25rem, 1.0rem + 1.0vw, 1.75rem); /* 20 → 28px */
    --fs-h3:       clamp(1.125rem, 1.0rem + 0.4vw, 1.25rem);/* 18 → 20px */
    --fs-h4:       1rem;                                     /* 16px */
    --fs-body-lg:  1.0625rem;                                /* 17px */
    --fs-body:     0.9375rem;                                /* 15px */
    --fs-body-sm:  0.8125rem;                                /* 13px */
    --fs-caption:  0.75rem;                                  /* 12px */
    --fs-overline: 0.6875rem;                                /* 11px */

    /* Line-heights */
    --lh-tight:    1.15;
    --lh-heading:  1.25;
    --lh-snug:     1.4;
    --lh-body:     1.55;
    --lh-relaxed:  1.7;

    /* Font-weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Letter-spacing */
    --ls-tight:   -0.015em;
    --ls-normal:   0;
    --ls-wide:     0.04em;
    --ls-caps:     0.08em;
}

/* ============================================================
   4. SPACING — 4-punts-schaal
   Gebruik in gaps, padding, margin. Namen refereren naar
   multiples van 4px (behalve --space-px).
   ============================================================ */

:root {
    --space-px:  1px;
    --space-0:   0;
    --space-1:   0.25rem;  /*  4px */
    --space-2:   0.5rem;   /*  8px */
    --space-3:   0.75rem;  /* 12px */
    --space-4:   1rem;     /* 16px */
    --space-5:   1.25rem;  /* 20px */
    --space-6:   1.5rem;   /* 24px */
    --space-7:   1.75rem;  /* 28px */
    --space-8:   2rem;     /* 32px */
    --space-10:  2.5rem;   /* 40px */
    --space-12:  3rem;     /* 48px */
    --space-16:  4rem;     /* 64px */
    --space-20:  5rem;     /* 80px */
    --space-24:  6rem;     /* 96px */
    --space-32:  8rem;     /* 128px */
}

/* ============================================================
   5. BORDER-RADIUS
   Naamconventie: kleinere waarden voor inputs/chips, grote
   voor kaarten en hero-beelden. --radius-pill voor zuivere
   rondingen (chips, avatars).
   ============================================================ */

:root {
    --radius-none:  0;
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   24px;
    --radius-3xl:   32px;
    --radius-pill:  999px;
    --radius-circle: 50%;
}

/* ============================================================
   6. SHADOW
   Elevation-schaal. Waarden zijn getuned op lichte oppervlakken
   (geen harde zwarten — rgba op neutral-900 voor neutraliteit).
   ============================================================ */

:root {
    --shadow-xs:     0 1px 2px rgba(16, 18, 24, 0.05);
    --shadow-sm:     0 2px 8px rgba(16, 18, 24, 0.06);
    --shadow-card:   0 4px 16px rgba(16, 18, 24, 0.08);
    --shadow-raised: 0 8px 24px rgba(16, 18, 24, 0.12);
    --shadow-hero:   0 16px 48px rgba(16, 18, 24, 0.20);
    --shadow-focus:  0 0 0 3px var(--color-focus-ring);
    --shadow-inset:  inset 0 1px 2px rgba(16, 18, 24, 0.06);
}

/* ============================================================
   7. MOTION
   Gedeelde easings & durations voor hovers, transities en
   micro-interacties. Zie sectie 10 voor reduced-motion guard.
   ============================================================ */

:root {
    --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-instant: 80ms;
    --duration-fast:    150ms;
    --duration-base:    220ms;
    --duration-slow:    320ms;
    --duration-slower:  480ms;

    --transition-hover: background-color var(--duration-fast) var(--ease-out),
                        box-shadow var(--duration-fast) var(--ease-out),
                        transform var(--duration-fast) var(--ease-out),
                        border-color var(--duration-fast) var(--ease-out);
}

/* ============================================================
   8. Z-INDEX
   Gestapelde volgorde voor alle lagen. Gebruik deze tokens
   i.p.v. losse getallen om conflicten te voorkomen.
   ============================================================ */

:root {
    --z-base:       1;
    --z-raised:    10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-header:   300;
    --z-overlay:  350;
    --z-flyout:   400;
    --z-modal:    500;
    --z-toast:    600;
    --z-tooltip:  700;
}

/* ============================================================
   9. LEGACY-ALIASSEN
   Blijft de oude namen uit header.php :root{} ondersteunen.
   Nieuwe code gebruikt de semantische tokens uit sectie 2+.
   Waarden zijn IDENTIEK aan header.php, zodat overlap geen
   visuele shift veroorzaakt. Uitzondering: --heading-color
   blijft #084AF3 (legacy); het UNIFIED heading-token heet
   --color-heading (sectie 2).
   ============================================================ */

:root {
    /* Kleur-aliassen */
    --primary-color:    var(--primary-500);
    --heading-color:    #084af3; /* Legacy — unified variant = --color-heading */
    --body-text-color:  var(--neutral-900);
    --white-color:      var(--neutral-0);
    --black-color:      var(--neutral-900);
    --link-color:       var(--color-link);
    --gray-color:       #e6e6e6;      /* bewust behouden — legacy border-kleur */
    --light-gray-color: #f7f7f7;      /* bewust behouden — legacy achtergrond */

    /* Font-size-aliassen (oude schaal) */
    --font-size-large:  16px;
    --font-size-base:   14px;
    --font-size-small:  12px;
    --font-size-xsmall: 10px;
    --font-size-lg:     16px;         /* alias voor --font-size-large (dashboard.css) */

    /* Footer-aliassen (ongewijzigd t.o.v. header.php) */
    --footer-bg:             #1a1a2e;
    --footer-bg-gradient:    #16213e;
    --footer-text:           #e8e8e8;
    --footer-text-muted:     #b8b8b8;
    --footer-text-faint:     #9a9a9a;
    --footer-accent:         #4a90e2;
    --footer-accent-hover:   #6eb5ff;
    --footer-accent-dark:    #357abd;
    --footer-border:         rgba(255, 255, 255, 0.1);
    --footer-border-faint:   rgba(255, 255, 255, 0.08);
}

/* ============================================================
   10. REDUCED MOTION GUARD
   Gebruikers die prefers-reduced-motion hebben ingesteld
   krijgen instant transitions. Componenten die eigen animaties
   definiëren moeten deze guard ook respecteren (UX-principe 10).
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast:    0ms;
        --duration-base:    0ms;
        --duration-slow:    0ms;
        --duration-slower:  0ms;
    }
}