/* Grained Design System (Claude Design): fonts, kleuren, typografie en base.
   Kleuren en typografie letterlijk uit tokens/colors.css en tokens/typography.css; niet hier aanpassen maar in het design system. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2');}

:root{
--graphite:#252320;--paper:#F5F2EC;--kiln:#A84B25;--sand:#CDBB9A;
--aluminium:#B7B8B3;--oak:#8A6843;--sage:#5E6B55;--slate:#4B5A66;--smoke:#2E2C29;
--stone-0:#FCFAF6;--stone-50:#F5F2EC;--stone-100:#EFEBE3;--stone-150:#E6E1D7;--stone-200:#D8D2C6;--stone-300:#C2BBAE;--stone-400:#A39C8F;--stone-500:#857E72;--stone-600:#655F55;--stone-700:#4F4A42;--stone-800:#36332D;--stone-900:#252320;--stone-950:#181715;
--night-0:#141311;--night-50:#1A1917;--night-100:#211F1C;--night-150:#2A2824;--night-200:#37342F;--night-300:#4A463F;--night-500:#7F796E;--night-600:#A8A194;--night-900:#EEE9E0;
--green-600:#3C6A48;--green-50:#E4EAE1;--green-300:#86B28F;--green-950:#1E2A21;
--brick-600:#A2352B;--brick-50:#F3E0DB;--brick-300:#EC8374;--brick-950:#321C18;
--kiln-50:#F2E3D9;--kiln-300:#E08A5C;--kiln-700:#8C3D1D;--sage-300:#9FB08F;--sage-50:#E5E8DF;

--color-background-primary:var(--stone-50);
--color-background-secondary:var(--stone-100);
--color-surface-primary:var(--stone-0);
--color-surface-inverse:var(--graphite);
--color-text-primary:var(--graphite);
--color-text-secondary:var(--stone-600);
--color-text-tertiary:var(--stone-500);
--color-text-inverse:var(--paper);
--color-text-on-accent:var(--paper);
--color-border:var(--stone-200);
--color-border-subtle:var(--stone-150);
--color-border-strong:var(--stone-300);
--color-focus-ring:var(--kiln);
--color-accent:var(--kiln);
--color-accent-pressed:var(--kiln-700);
--color-action-primary:var(--graphite);
--color-action-primary-pressed:var(--stone-800);
--color-success:var(--green-600);--color-success-subtle:var(--green-50);
--color-error:var(--brick-600);--color-error-subtle:var(--brick-50);
--color-mode-break:var(--sage);--color-mode-break-subtle:var(--sage-50);

--font-family-brand:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-family-numeric:'Geist','Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
--numeric-features:"tnum" 1,"lnum" 1,"ss01" 0;

/* Ruimte en hoeken volgens de readme: 4px-basis, knoppen 10, kaarten 16. */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
--radius-small:10px;--radius-medium:16px;--radius-large:24px;--radius-pill:999px;
--ease-fall:cubic-bezier(.55,0,.7,.25);--ease-settle:cubic-bezier(.2,.8,.2,1);
}

[data-theme="dark"]{
--color-background-primary:var(--night-0);
--color-background-secondary:var(--night-50);
--color-surface-primary:var(--night-100);
--color-surface-inverse:var(--paper);
--color-text-primary:var(--night-900);
--color-text-secondary:var(--night-600);
--color-text-tertiary:var(--night-500);
--color-text-inverse:var(--graphite);
--color-text-on-accent:var(--night-0);
--color-border:var(--night-200);
--color-border-subtle:#2A2825;
--color-border-strong:var(--night-300);
--color-focus-ring:var(--kiln-300);
--color-accent:var(--kiln-300);
--color-accent-pressed:#C8764B;
--color-action-primary:var(--night-900);
--color-action-primary-pressed:#D6D0C5;
--color-success:var(--green-300);--color-success-subtle:var(--green-950);
--color-error:var(--brick-300);--color-error-subtle:var(--brick-950);
--color-mode-break:var(--sage-300);--color-mode-break-subtle:#1F241C;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;font-synthesis:none;}
body{margin:0;background:var(--color-background-primary);color:var(--color-text-primary);font-family:var(--font-family-brand);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
i,em,cite,dfn,var,address,blockquote,q{font-style:normal;}
em{font-weight:600;}
a{color:var(--color-text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--color-border-strong);}
a:hover{color:var(--color-accent);text-decoration-color:currentColor;}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;}
.g-tnum{font-family:var(--font-family-numeric);font-feature-settings:var(--numeric-features);font-variant-numeric:tabular-nums lining-nums;}