/* Tokens van jgroenen.nl: de kern van de familie. Ook los te laden, bijvoorbeeld
   in presentaties of op apitecture.nl en publictech.nl:
   <link rel="stylesheet" href="https://www.jgroenen.nl/css/tokens.css"> */
/* Atkinson Hyperlegible, op de site zelf: geen verzoeken naar buiten */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url(/fonts/atkinson-hyperlegible-regular.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url(/fonts/atkinson-hyperlegible-italic.woff2) format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url(/fonts/atkinson-hyperlegible-bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url(/fonts/atkinson-hyperlegible-bolditalic.woff2) format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Kern van de familie: deze tokennamen en de ruimteschaal gelden ook op
   apitecture.nl, everybit en publictech.nl. Zie /design-system/. */
:root {
    /* Merk: de remix-kleuren */
    --jg-red: #fb5632;
    --jg-pink: #ee4bab;
    --jg-pink-light: #f6b3cc;
    --jg-purple: #703289;
    --jg-indigo: #2d2576;
    --accent: var(--jg-red);

    /* Ondergrond en tekst */
    --paper: #F3F2EF;
    --card: #FFFFFF;
    --ink: #333;
    --text: var(--ink);
    --muted: #666;
    --line: rgba(0, 0, 0, 0.08);
    --shadow: #AAAAAA;
    --quote: #0058b8;

    /* Kleuren van andere platforms, alleen voor hun eigen knoppen */
    --mastodon: #6364FF;
    --mastodon-dark: #4f50e0;
    --mastodon-light: #f3f4ff;

    --font-sans: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif;
    --font-serif: Georgia, serif;

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

    --radius-xs: 2px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 24px;

    --column-side: 328px;
    --column-main: 636px;
    --page: 920px;
}