/* Robu Fishing — generated from tokens.json */
:root, [data-theme="light"] {
  --antraciet: #3a3a3c;
  --donker-olijf: #7b8068;
  --olijfgroen: #9b9c73;
  --lichtgroen: #c2c9a3;
  --donkerbruin: #a26b3f;
  --lichtbruin: #c5a582;
  --creme: #e6d5c0;
  --olijf-diep: #5c614d;
  --olijf-nacht: #4f5442;
  --bruin-diep: #8a5530;
  --bruin-nacht: #7d4c29;
  --surface: #faf7f1;
  --surface-raised: #ffffff;
  --surface-creme: #f4ebdf;
  --surface-groen: #eef0e5;
  --surface-inverse: var(--antraciet);
  --surface-inverse-hover: #2c2c2e;
  --ink: var(--antraciet);
  --ink-muted: #6b6d5e;
  --ink-inverse: #f3f3f4;
  --ink-inverse-muted: var(--lichtgroen);
  --on-primary: #ffffff;
  --line: #e6e0d4;
  --line-strong: #8f8a7e;
  --succes: var(--olijf-diep);
  --waarschuwing: var(--bruin-diep);
  --fout: #a13d2c;
  --fout-soft: #fbece8;
  --shadow-1: 0 1px 2px #3a3a3c0d, 0 4px 10px #3a3a3c0f;
  --shadow-2: 0 4px 10px #3a3a3c0f, 0 16px 42px -6px #3a3a3c24;
  --shadow-3: 0 10px 26px #3a3a3c14, 0 26px 68px -10px #3a3a3c38;
  --focus-ring: 0 0 0 2px #faf7f1, 0 0 0 4px #3a3a3c;
  --focus-ring-inverse: 0 0 0 2px #3a3a3c, 0 0 0 4px #c2c9a3;
}
:root {
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 26px;
  --space-6: 42px;
  --space-7: 68px;
  --space-8: 110px;
  --radius-0: 0px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-pill: 999px;
  --size-control-s: 42px;
  --size-control-m: 52px;
  --size-control-l: 58px;
  --size-icon-s: 16px;
  --size-icon-m: 20px;
  --size-icon-l: 24px;
  --size-icon-xl: 68px;
  --size-disc: 58px;
  --size-sticker-disc: 42px;
  --size-dot: 8px;
  --size-stamp: 26px;
  --size-counter: 20px;
  --size-logo-header: 68px;
  --size-logo-header-mobile: 52px;
  --size-logo-min: 34px;
  --size-announce: 42px;
  --size-hero-min: 440px;
  --size-promo-groot-min: 380px;
  --size-promo-klein-min: 178px;
  --size-card-min: 220px;
  --size-container: 1240px;
  --size-measure: 680px;
  --bp-s: 640px;
  --bp-m: 820px;
  --bp-l: 1240px;
  --border-hairline: 1px;
  --border-control: 1.5px;
  --border-strong: 2px;
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --font-display: "Outfit", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 68px; line-height: 68px; font-weight: 700; letter-spacing: -0.025em; }
.display { font-family: var(--font-display); font-size: 54px; line-height: 58px; font-weight: 700; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 42px; line-height: 48px; font-weight: 700; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-display); font-size: 33px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 650; letter-spacing: -0.005em; }
.h4 { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 650; }
.body-lg { font-family: var(--font-sans); font-size: 20px; line-height: 32px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 650; letter-spacing: 0.01em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; }
.price { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 750; }
.price-lg { font-family: var(--font-sans); font-size: 33px; line-height: 40px; font-weight: 800; }
.stamp { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 900; letter-spacing: 0.04em; font-style: italic; }
.stamp-lg { font-family: var(--font-sans); font-size: 26px; line-height: 26px; font-weight: 900; letter-spacing: 0.01em; font-style: italic; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable-Italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }