/* ============================================================
   TOKENS.CSS – Design tokens voor Voetbalkamp.nl
============================================================ */

:root {
    /* TYPOGRAFIE */
    --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    --font-headings: var(--font-base);
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --date-separator: "t/m";

    /* KLEUREN */
    --color-ink-900: #0F0F0F;
    --color-ink-800: #1A1A1A;
    --color-ink-600: #444444;
    --color-ink-400: #777777;

    --color-bg-page:   #FFFFFF;
    --color-bg-panel:  #F4F6F7;
    --color-bg-soft:   #F9FAFB;
    --color-line:      #E6E8EA;

    --color-primary:   #1E80FF;
    --color-success:   #27B76A;
    --color-warning:   #FFC444;
    --color-danger:    #E53935;

    /* RADII */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* SHADOWS */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
    --shadow-md: 0 3px 10px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    /* SPACING */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* CAMP CARD SPECIFIEKE TOKENS */
    --camp-radius: var(--radius-md);
    --camp-padding: var(--space-4);
    --camp-shadow: var(--shadow-sm);
    --camp-shadow-hover: var(--shadow-md);
}

/* Global body styles */
body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-ink-900);
    background: var(--color-bg-page);
}