/*
 * SevenTimes – Design Tokens: Spacing, Border-radius, Typography
 * Gebruik deze variabelen in nieuwe code; vervangt geleidelijk magic numbers.
 * Laadt direct na colors.css via base.html.
 */

:root {
    /* ── Spacing ─────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* ── Border-radius ───────────────────────────────────────── */
    --radius-xs:   4px;   /* kleine badges, chips */
    --radius-sm:   7px;   /* .inverse, kleine elementen */
    --radius-md:  10px;   /* standaard form-elementen */
    --radius-lg:  15px;   /* menu-knoppen, status-cirkels */
    --radius-xl:  20px;   /* weeknr, dayheader */
    --radius-pill: 999px; /* pill-knoppen, badges */

    /* ── Typography (font-size) ──────────────────────────────── */
    --text-2xs: 10px;
    --text-xs:  11px;
    --text-sm:  12px;
    --text-base: 14px;
    --text-md:  15px;
    --text-lg:  16px;
    --text-xl:  18px;
    --text-2xl: 24px;
}