/* BillPip brand tokens v5 — v4 UI-kit tokens + v4.1-delta (dark --overdue) + web layer. Generated by _bron/build_tokens.py. — site copy: the two TTF @font-face rules were removed; the site self-hosts woff2 subsets (see site CSS). Token values unchanged. */
:root{--lei-primary:#53628F;--lei-ink:#161B2E;--lei-light:#9FB0D0;--lei-slate:#5A6175;--lei-line:#E2E5EE;--lei-paper:#F7F8FB;--lei-night:#0F1220;--lei-paid:#147538;--lei-due:#8F5B00;--lei-overdue:#C42B2B;--s-0:0px;--s-1:2px;--s-2:4px;--s-3:8px;--s-4:12px;--s-5:16px;--s-6:20px;--s-7:24px;--s-8:32px;--s-9:40px;--s-10:48px;--s-11:64px;--s-12:80px;--r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;--r-paper:6px;--display:Outfit, system-ui, sans-serif;--ui:Inter, system-ui, sans-serif;--t-display:600 48px/1.05 var(--display);--ls-display:-0.025em;--t-title:600 32px/1.12 var(--display);--ls-title:-0.02em;--t-heading:600 22px/1.25 var(--display);--ls-heading:-0.01em;--t-subheading:600 17px/1.35 var(--ui);--ls-subheading:0;--t-body-l:400 17px/1.5 var(--ui);--ls-body-l:0;--t-body:400 15px/1.5 var(--ui);--ls-body:0;--t-small:400 13px/1.45 var(--ui);--ls-small:0;--t-label:600 11px/1.2 var(--ui);--ls-label:0.09em;--t-amount-xl:600 56px/1 var(--display);--ls-amount-xl:-0.03em;--t-amount:600 17px/1.2 var(--ui);--ls-amount:-0.01em;--d-instant:1ms;--d-fast:140ms;--d-base:240ms;--d-slow:420ms;--d-morph:620ms;--d-sheet:520ms;--d-celebrate:1200ms;--e-standard:cubic-bezier(.2,0,0,1);--e-out:cubic-bezier(.16,1,.3,1);--e-in:cubic-bezier(.4,0,1,1);--e-spring:linear(0.0000,0.0493,0.1694,0.3250,0.4897,0.6450,0.7800,0.8891,0.9711,1.0278,1.0625,1.0795,1.0834,1.0783,1.0677,1.0545,1.0408,1.0280,1.0170,1.0082,1.0016,0.9972,0.9945,0.9933,0.9931,0.9936,0.9945,0.9956,0.9967,0.9978,0.9987,0.9994,0.9999,1.0003,1.0005,1.0006,1.0006,1.0005,1.0004,1.0004,1);--e-spring-soft:linear(0.0000,0.0353,0.1205,0.2312,0.3506,0.4676,0.5755,0.6706,0.7515,0.8183,0.8718,0.9136,0.9454,0.9688,0.9854,0.9968,1.0040,1.0083,1.0105,1.0111,1.0108,1.0099,1.0087,1.0073,1.0060,1.0048,1.0037,1.0028,1.0021,1.0015,1.0010,1.0006,1.0004,1.0002,1.0000,1.0000,0.9999,0.9999,0.9999,0.9999,1);--focus-w:2px;--focus-o:2px;--hit:44px;--compose-h:60px;--tabbar-h:84px;--topbar-h:64px;--feed-w:760px;--paper-w:560px}
[data-theme=light]{color-scheme:light;--bg:#F7F8FB;--surface:#FFFFFF;--surface-2:#F1F3F8;--surface-3:#E9EDF5;--text:#161B2E;--muted:#5A6175;--faint:#8A93AB;--accent:#53628F;--accent-hover:#47557D;--on-accent:#FFFFFF;--primary:#161B2E;--primary-hover:#262D45;--on-primary:#FFFFFF;--line:#E2E5EE;--line-strong:#C9CFDD;--control-border:#7E879D;--focus:#53628F;--scrim:rgba(15,18,32,.32);--paid:#147538;--paid-soft:#E5F2EA;--paid-on-soft:#0F5C2C;--due:#8F5B00;--due-soft:#F7EEDD;--due-on-soft:#734900;--overdue:#C42B2B;--overdue-soft:#FBE7E7;--overdue-on-soft:#A32020;--info-soft:#E8ECF5;--info-on-soft:#3F4C73;--paper:#FFFFFF;--paper-ink:#161B2E;--paper-muted:#5A6175;--paper-line:#E2E5EE;--sh-0:none;--sh-1:0 1px 2px rgba(22,27,46,.06),0 0 0 1px rgba(22,27,46,.06);--sh-2:0 1px 2px rgba(22,27,46,.06),0 8px 24px -12px rgba(22,27,46,.18);--sh-3:0 2px 6px rgba(22,27,46,.06),0 24px 48px -20px rgba(22,27,46,.28);--sh-4:0 40px 90px -30px rgba(22,27,46,.40);--sh-paper:0 1px 1px rgba(22,27,46,.05),0 2px 4px rgba(22,27,46,.05),0 18px 40px -16px rgba(22,27,46,.25);--veil:rgba(233,237,245,.55);--veil-blur:8px;--glass:rgba(255,255,255,.86);--glass-blur:28px;--glass-sat:140%;--glass-border:rgba(255,255,255,.95);--glass-fallback:#FFFFFF;--glass-hc:rgba(255,255,255,.96)}
[data-theme=dark]{color-scheme:dark;--bg:#0F1220;--surface:#161B2E;--surface-2:#1E2439;--surface-3:#262D45;--text:#F7F8FB;--muted:#9FB0D0;--faint:#6B7699;--accent:#9FB0D0;--accent-hover:#B4C2DC;--on-accent:#0F1220;--primary:#F7F8FB;--primary-hover:#E2E5EE;--on-primary:#0F1220;--line:#2B3250;--line-strong:#3A4366;--control-border:#6B7490;--focus:#9FB0D0;--scrim:rgba(5,7,14,.55);--paid:#2E9E5B;--paid-soft:#147538;--paid-on-soft:#FFFFFF;--due:#C08A2E;--due-soft:#8F5B00;--due-on-soft:#FFFFFF;--overdue:#E55A5A;--overdue-soft:#C42B2B;--overdue-on-soft:#FFFFFF;--info-soft:#232A44;--info-on-soft:#C3CEE4;--paper:#F7F8FB;--paper-ink:#161B2E;--paper-muted:#5A6175;--paper-line:#E2E5EE;--sh-0:none;--sh-1:0 0 0 1px #2B3250;--sh-2:0 0 0 1px #2B3250,0 10px 28px -14px rgba(0,0,0,.6);--sh-3:0 0 0 1px #2F3757,0 24px 50px -20px rgba(0,0,0,.7);--sh-4:0 0 0 1px #2F3757,0 40px 90px -30px rgba(0,0,0,.8);--sh-paper:0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.3),0 24px 48px -16px rgba(0,0,0,.6);--veil:rgba(10,12,22,.55);--veil-blur:8px;--glass:rgba(24,29,50,.82);--glass-blur:28px;--glass-sat:140%;--glass-border:rgba(255,255,255,.10);--glass-fallback:#161B2E;--glass-hc:rgba(22,27,46,.96)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root [data-theme],[data-theme]{--glass:var(--glass-fallback);--veil:var(--scrim)}}
@media (prefers-reduced-transparency:reduce){[data-theme]{--glass:var(--glass-fallback);--glass-blur:0px;--veil:var(--scrim);--veil-blur:0px}}
@media (prefers-contrast:more){[data-theme]{--glass:var(--glass-hc);--line:var(--line-strong);--control-border:var(--text);--muted:var(--text)}}
@media (max-width:480px){:root{--t-display:600 36px/1.08 var(--display);--t-title:600 26px/1.15 var(--display);--t-heading:600 20px/1.25 var(--display);--t-amount-xl:600 44px/1 var(--display)}}
.m{--t-display:600 34px/1.08 var(--display);--t-title:600 26px/1.15 var(--display);--t-heading:600 20px/1.25 var(--display);--t-amount-xl:600 44px/1 var(--display)}
/* --- v5 web layer --- */
:root{--t-hero:600 72px/1.02 var(--display);--ls-hero:-0.03em;--t-section:600 40px/1.1 var(--display);--ls-section:-0.02em;--t-lead:400 20px/1.5 var(--ui);--ls-lead:0;--t-eyebrow:600 12px/1.2 var(--ui);--ls-eyebrow:0.12em;--w-content-max:1200px;--w-prose-max:680px;--w-gutter:24px;--w-gutter-m:20px;--w-section-y:120px;--w-section-y-m:72px;--w-nav-h:72px;}@media (max-width:768px){:root{--t-hero:600 44px/1.06 var(--display);--ls-hero:-0.025em;--t-section:600 30px/1.15 var(--display);--ls-section:-0.02em;--w-section-y:72px;--w-gutter:20px}}
.tnum,.amount{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
@media (prefers-reduced-motion:reduce){:root{--d-fast:1ms;--d-base:1ms;--d-slow:1ms;--d-morph:1ms;--d-sheet:1ms;--d-celebrate:1ms}}
/* site copy: prefers-color-scheme mirror of [data-theme=dark] (declarations copied verbatim by build.py; light stays default, no toggle). Nested [data-theme=dark] scopes are unaffected. */
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0F1220;--surface:#161B2E;--surface-2:#1E2439;--surface-3:#262D45;--text:#F7F8FB;--muted:#9FB0D0;--faint:#6B7699;--accent:#9FB0D0;--accent-hover:#B4C2DC;--on-accent:#0F1220;--primary:#F7F8FB;--primary-hover:#E2E5EE;--on-primary:#0F1220;--line:#2B3250;--line-strong:#3A4366;--control-border:#6B7490;--focus:#9FB0D0;--scrim:rgba(5,7,14,.55);--paid:#2E9E5B;--paid-soft:#147538;--paid-on-soft:#FFFFFF;--due:#C08A2E;--due-soft:#8F5B00;--due-on-soft:#FFFFFF;--overdue:#E55A5A;--overdue-soft:#C42B2B;--overdue-on-soft:#FFFFFF;--info-soft:#232A44;--info-on-soft:#C3CEE4;--paper:#F7F8FB;--paper-ink:#161B2E;--paper-muted:#5A6175;--paper-line:#E2E5EE;--sh-0:none;--sh-1:0 0 0 1px #2B3250;--sh-2:0 0 0 1px #2B3250,0 10px 28px -14px rgba(0,0,0,.6);--sh-3:0 0 0 1px #2F3757,0 24px 50px -20px rgba(0,0,0,.7);--sh-4:0 0 0 1px #2F3757,0 40px 90px -30px rgba(0,0,0,.8);--sh-paper:0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.3),0 24px 48px -16px rgba(0,0,0,.6);--veil:rgba(10,12,22,.55);--veil-blur:8px;--glass:rgba(24,29,50,.82);--glass-blur:28px;--glass-sat:140%;--glass-border:rgba(255,255,255,.10);--glass-fallback:#161B2E;--glass-hc:rgba(22,27,46,.96)}}
@media (prefers-color-scheme:dark) and (prefers-reduced-transparency:reduce){:root{--glass:var(--glass-fallback);--glass-blur:0px;--veil:var(--scrim);--veil-blur:0px}}
@media (prefers-color-scheme:dark) and (prefers-contrast:more){:root{--glass:var(--glass-hc);--line:var(--line-strong);--control-border:var(--text);--muted:var(--text)}}
/* site copy: logo tokens (inline SVG logo). Light: mark --lei-primary, body --lei-ink, pip --lei-paid (= billpip-horizontaal-kleur-op-licht.svg). Dark: mark + body #FFFFFF (= billpip-horizontaal-kleur-op-donker.svg), pip unchanged. */
:root{--logo-mark:var(--lei-primary);--logo-body:var(--lei-ink);--logo-pip:var(--lei-paid)}
[data-theme=dark]{--logo-mark:#FFFFFF;--logo-body:#FFFFFF}
@media (prefers-color-scheme:dark){:root{--logo-mark:#FFFFFF;--logo-body:#FFFFFF}}