/* fonts */
/* StartDock webfonts — self-hosted from Google Fonts (OFL). latin + latin-ext subsets. */
@font-face{font-family:'Sora';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/geist-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/geist-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* colors */
/* StartDock — color tokens. Base palettes + semantic aliases for light (:root) and dark ([data-theme="dark"]). */
:root{
/* Green — brand */
--green-50:#EFFAF3;--green-100:#D8F3E2;--green-200:#B0E7C5;--green-300:#7CD6A0;--green-400:#3FC077;--green-500:#18A65A;--green-600:#0C8A47;--green-700:#096D38;--green-800:#08562D;--green-900:#073F22;--green-950:#032515;
/* Sand — warm neutrals (light theme) */
--sand-0:#FFFFFF;--sand-25:#FAF8F4;--sand-50:#F5F2EC;--sand-100:#EDE9E1;--sand-200:#E0DBD1;--sand-300:#CAC4B8;--sand-400:#A7A196;--sand-500:#837D72;--sand-600:#5E5A51;--sand-700:#45423B;--sand-800:#2D2B26;--sand-900:#1B1A16;--sand-950:#121110;
/* Night — near-black with green undertone (dark theme) */
--night-950:#070D0A;--night-900:#0B1410;--night-850:#0F1914;--night-800:#142019;--night-750:#18261F;--night-700:#1F2E26;--night-600:#2C3D34;--night-500:#475A50;--night-400:#6F7E76;--night-300:#A3B0A8;--night-100:#DCE3DE;--night-50:#EEF2EE;
/* Status base */
--blue-50:#ECF2FD;--blue-200:#BCD0F7;--blue-400:#6E9AF0;--blue-500:#2F6BDB;--blue-700:#1F4FA8;--blue-900:#11295A;
--amber-50:#FDF4E1;--amber-200:#F5D894;--amber-400:#EDB43D;--amber-500:#D9920B;--amber-700:#8A5A00;--amber-900:#4A3000;
--red-50:#FCEDEB;--red-200:#F3C0BA;--red-400:#EC7A6F;--red-500:#D6453A;--red-700:#A12A21;--red-900:#561510;
--star:#F2A818;

/* ---------- Semantic — light ---------- */
--bg-page:var(--sand-25);
--bg-subtle:var(--sand-50);
--bg-glow:rgba(24,166,90,.16);
--surface-card:var(--sand-0);
--surface-raised:var(--sand-0);
--surface-sunken:var(--sand-50);
--surface-strong:#0E1712;          /* donkere bento-kaart / productblok in licht thema */
--surface-strong-text:var(--night-50);
--surface-nav:rgba(255,255,255,.74);
--surface-chip:rgba(255,255,255,.92);
--surface-overlay:rgba(18,17,16,.48);
--photo-scrim:linear-gradient(180deg,rgba(8,12,10,0) 35%,rgba(8,12,10,.78) 100%);/* @kind color */
--border-subtle:#ECE8E0;
--border-default:var(--sand-200);
--border-strong:var(--sand-300);
--text-primary:#171612;
--text-secondary:var(--sand-600);
--text-tertiary:var(--sand-500);
--text-inverse:var(--night-50);
--text-on-photo:#FFFFFF;
--accent:var(--green-600);
--accent-hover:var(--green-700);
--accent-pressed:var(--green-800);
--accent-text:#0A7A3F;
--accent-soft:#E3F5EA;
--accent-soft-text:var(--green-800);
--accent-surface:var(--green-600);
--text-on-accent:#FFFFFF;
--brand-mark:var(--green-600);
--brand-dot:var(--green-500);
--radius-ring:rgba(12,138,71,.28);
--radius-fill:rgba(24,166,90,.08);
--focus-ring:0 0 0 3px rgba(12,138,71,.32);
/* Status — nieuw · bezig · gelukt · let op */
--status-new-bg:var(--blue-50);--status-new-fg:var(--blue-700);--status-new-dot:var(--blue-500);
--status-progress-bg:var(--amber-50);--status-progress-fg:var(--amber-700);--status-progress-dot:var(--amber-500);
--status-done-bg:var(--accent-soft);--status-done-fg:var(--green-800);--status-done-dot:var(--green-500);
--status-warn-bg:var(--red-50);--status-warn-fg:var(--red-700);--status-warn-dot:var(--red-500);
--status-neutral-bg:var(--sand-100);--status-neutral-fg:var(--sand-700);--status-neutral-dot:var(--sand-400);
color-scheme:light;
}

/* ---------- Semantic — dark ---------- */
[data-theme="dark"]{
--bg-page:var(--night-950);
--bg-subtle:var(--night-900);
--bg-glow:rgba(52,199,116,.13);
--surface-card:var(--night-850);
--surface-raised:var(--night-800);
--surface-sunken:var(--night-900);
--surface-strong:var(--night-750);
--surface-strong-text:var(--night-50);
--surface-nav:rgba(17,27,22,.72);
--surface-chip:rgba(20,32,25,.9);
--surface-overlay:rgba(0,0,0,.6);
--border-subtle:#16211B;
--border-default:var(--night-700);
--border-strong:var(--night-600);
--text-primary:var(--night-50);
--text-secondary:var(--night-300);
--text-tertiary:var(--night-400);
--text-inverse:#171612;
--accent:#2FC26E;
--accent-hover:#52D38A;
--accent-pressed:#27A75E;
--accent-text:#4CD68A;
--accent-soft:rgba(47,194,110,.14);
--accent-soft-text:#7FE3AA;
--accent-surface:#2FC26E;
--text-on-accent:#03190D;
--brand-mark:#34C774;
--brand-dot:#34C774;
--radius-ring:rgba(52,199,116,.32);
--radius-fill:rgba(52,199,116,.07);
--focus-ring:0 0 0 3px rgba(47,194,110,.4);
--status-new-bg:rgba(47,107,219,.18);--status-new-fg:#9CBBF5;--status-new-dot:var(--blue-400);
--status-progress-bg:rgba(217,146,11,.18);--status-progress-fg:#F2C870;--status-progress-dot:var(--amber-400);
--status-done-bg:rgba(47,194,110,.16);--status-done-fg:#7FE3AA;--status-done-dot:#34C774;
--status-warn-bg:rgba(214,69,58,.18);--status-warn-fg:#F4A098;--status-warn-dot:var(--red-400);
--status-neutral-bg:var(--night-750);--status-neutral-fg:var(--night-300);--status-neutral-dot:var(--night-400);
color-scheme:dark;
}

/* typography */
/* StartDock — typography tokens. Sora (koppen) · Instrument Sans (tekst/UI) · Geist Mono (labels, data). */
:root{
--font-display:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
/* Sizes */
--fs-display:clamp(52px,8.2vw,112px);/* @kind font */
--fs-h1:clamp(40px,5.4vw,72px);/* @kind font */
--fs-h2:clamp(32px,3.8vw,52px);/* @kind font */
--fs-h3:clamp(24px,2.4vw,32px);/* @kind font */
--fs-h4:22px;/* @kind font */
--fs-body-lg:19px;/* @kind font */
--fs-body:16px;/* @kind font */
--fs-small:14px;/* @kind font */
--fs-xs:12.5px;/* @kind font */
--fs-mono-label:12px;/* @kind font */
--fs-mono-sm:11px;/* @kind font */
--fs-number-xl:clamp(40px,4.4vw,56px);/* @kind font */
/* Weights */
--fw-display:700;/* @kind font */--fw-heading:650;/* @kind font */--fw-semibold:600;/* @kind font */--fw-medium:500;/* @kind font */--fw-regular:400;/* @kind font */
/* Line heights */
--lh-display:.94;/* @kind font */--lh-heading:1.04;/* @kind font */--lh-tight:1.15;/* @kind font */--lh-snug:1.3;/* @kind font */--lh-body:1.55;/* @kind font */
/* Tracking */
--ls-display:-0.052em;/* @kind font */--ls-h1:-0.045em;/* @kind font */--ls-h2:-0.035em;/* @kind font */--ls-h3:-0.025em;/* @kind font */--ls-h4:-0.015em;/* @kind font */--ls-body:-0.003em;/* @kind font */--ls-mono:0.08em;/* @kind font */
}
/* Optional helper classes (components use inline styles + the vars above) */
.sd-display{font-family:var(--font-display);font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-wrap:balance}
.sd-h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:var(--fw-display);line-height:var(--lh-heading);letter-spacing:var(--ls-h1);text-wrap:balance}
.sd-h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-display);line-height:var(--lh-heading);letter-spacing:var(--ls-h2);text-wrap:balance}
.sd-h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-heading);line-height:var(--lh-tight);letter-spacing:var(--ls-h3)}
.sd-h4{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:var(--ls-h4)}
.sd-body-lg{font-family:var(--font-body);font-size:var(--fs-body-lg);line-height:var(--lh-body);text-wrap:pretty}
.sd-body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
.sd-small{font-family:var(--font-body);font-size:var(--fs-small);line-height:1.45}
.sd-mono-label{font-family:var(--font-mono);font-size:var(--fs-mono-label);font-weight:500;letter-spacing:var(--ls-mono);text-transform:uppercase}
.sd-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* spacing */
/* StartDock — spacing, radius, layout, breakpoints */
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;
--section-y:clamp(80px,11vw,160px);/* @kind spacing */
--gutter:clamp(20px,4vw,40px);/* @kind spacing */
--container-max:1240px;/* @kind spacing */
--container-narrow:880px;/* @kind spacing */
--nav-height:64px;/* @kind spacing */
/* Radius */
--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-pill:999px;
/* Breakpoints (reference values; use the literal px in media queries) */
--bp-sm:640px;/* @kind other */--bp-md:768px;/* @kind other */--bp-lg:1024px;/* @kind other */--bp-xl:1280px;/* @kind other */--bp-2xl:1440px;/* @kind other */
}

/* effects */
/* StartDock — shadows, blur, borders */
:root{
--shadow-xs:0 1px 2px rgba(28,24,16,.06);
--shadow-sm:0 1px 2px rgba(28,24,16,.05),0 2px 8px rgba(28,24,16,.05);
--shadow-md:0 2px 4px rgba(28,24,16,.04),0 10px 28px rgba(28,24,16,.08);
--shadow-lg:0 4px 10px rgba(28,24,16,.04),0 28px 64px rgba(28,24,16,.13);
--shadow-chip:0 1px 2px rgba(20,30,24,.08),0 10px 28px rgba(20,30,24,.16);
--shadow-nav:0 1px 2px rgba(28,24,16,.04),0 10px 32px rgba(28,24,16,.08);
--shadow-accent:0 8px 22px rgba(12,138,71,.26);
--shadow-device:0 2px 6px rgba(0,0,0,.08),0 40px 80px rgba(20,24,20,.22);
--inner-highlight:inset 0 1px 0 rgba(255,255,255,.6);/* @kind shadow */
--blur-nav:saturate(1.6) blur(16px);/* @kind other */
--blur-chip:saturate(1.4) blur(10px);/* @kind other */
--border-hairline:1px solid var(--border-subtle);/* @kind other */
--border-card:1px solid var(--border-default);/* @kind other */
}
[data-theme="dark"]{
--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
--shadow-md:0 2px 4px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
--shadow-lg:0 4px 10px rgba(0,0,0,.3),0 28px 64px rgba(0,0,0,.5);
--shadow-chip:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.45);
--shadow-nav:0 1px 2px rgba(0,0,0,.3),0 10px 32px rgba(0,0,0,.35);
--shadow-accent:0 8px 26px rgba(47,194,110,.22);
--shadow-device:0 2px 6px rgba(0,0,0,.4),0 40px 80px rgba(0,0,0,.55);
--inner-highlight:inset 0 1px 0 rgba(255,255,255,.05);/* @kind shadow */
}

/* motion */
/* StartDock — motion. Subtiel en betekenisvol: rustig infaden, ticker, ploppende chips, pulserende straal. */
:root{
--ease-out:cubic-bezier(.22,1,.36,1);/* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
--ease-plop:cubic-bezier(.34,1.45,.64,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:360ms;/* @kind other */--dur-reveal:700ms;/* @kind other */
--dur-pulse:3.2s;/* @kind other */--dur-ticker:40s;/* @kind other */
}
@keyframes sd-pulse{0%{transform:translate(-50%,-50%) scale(.55);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
@keyframes sd-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.035);opacity:.85}}
@keyframes sd-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes sd-plop{0%{transform:scale(.6) translateY(6px);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes sd-fade-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes sd-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* base */
/* StartDock — minimal element defaults */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[data-theme]{color:var(--text-primary)}
a{color:var(--accent-text);text-decoration:none;transition:color var(--dur-base) var(--ease-out)}
a:hover{color:var(--accent-hover)}
[data-theme="dark"] a:hover{color:var(--accent-hover)}
::selection{background:var(--accent-soft);color:var(--text-primary)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
button{font:inherit}