/* Design-tokens van Minicamping ’t Mostoch (overgenomen uit het Claude Design-ontwerp).
   Kleuren, lettertypes, maten en schaduwen staan hier op één plek. */

/* Lettertypes */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Gloock-Regular.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:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Gloock-Regular-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/SchibstedGrotesk-Variable.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:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/SchibstedGrotesk-Variable-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/SchibstedGrotesk-Italic-Variable.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:"Schibsted Grotesk";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/SchibstedGrotesk-Italic-Variable-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
/* Mos — primary greens */
--moss-950:#111E14;--moss-900:#17291C;--moss-800:#1F3A26;--moss-700:#2C5233;--moss-600:#3D6B40;--moss-500:#568A4E;--moss-400:#7AA56B;
/* Weide — fresh grass, nod to the original site's lime header */
--grass-600:#6E8F2A;--grass-500:#86A83A;--grass-300:#BFD48A;
/* Salie — soft green tints */
--sage-300:#C9D6B4;--sage-200:#DCE5CC;--sage-100:#EBF0E1;
/* Linnen — warm neutrals / paper */
--linen-50:#FAF7F0;--linen-100:#F3EEE2;--linen-200:#E7DFCD;--linen-300:#D6CCB5;
/* Klei — the red barn door */
--clay-700:#9C3A20;--clay-600:#B4482A;--clay-500:#C95F3B;--clay-100:#F6E2D7;
/* Koolzaad — sun / field yellow */
--sun-500:#D9A021;--sun-400:#E9B53D;--sun-100:#FBF0D2;
/* Phacelia — cornflower-blue field flowers */
--flower-600:#4A5AA0;--flower-500:#5E6FB8;--flower-100:#E3E6F4;
/* Inkt — text neutrals (green-tinted) */
--ink-900:#1A2219;--ink-700:#3B463A;--ink-500:#5F6A5B;--ink-400:#7D8678;--ink-300:#A9B0A3;
--white:#FFFFFF;

/* Semantic — surfaces */
--surface-page:var(--linen-50);--surface-raised:var(--white);--surface-sunken:var(--linen-100);
--surface-tint:var(--sage-100);--surface-strong:var(--moss-800);--surface-deep:var(--moss-900);
/* Semantic — text */
--text-strong:var(--moss-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-subtle:var(--ink-400);
--text-on-strong:var(--linen-50);--text-on-strong-muted:var(--sage-300);--text-link:var(--moss-600);--text-link-hover:var(--moss-800);
/* Semantic — borders */
--border-subtle:var(--linen-200);--border-default:var(--linen-300);--border-strong:var(--ink-300);--border-focus:var(--moss-500);
/* Semantic — actions */
--action-primary:var(--moss-800);--action-primary-hover:var(--moss-700);--action-primary-press:var(--moss-900);
--action-accent:var(--clay-600);--action-accent-hover:var(--clay-700);
--action-secondary:var(--sage-200);--action-secondary-hover:var(--sage-300);
/* Semantic — status */
--status-success:var(--moss-600);--status-success-bg:var(--sage-100);
--status-warning:#8A6410;--status-warning-bg:var(--sun-100);
--status-danger:var(--clay-700);--status-danger-bg:var(--clay-100);
--status-info:var(--flower-600);--status-info-bg:var(--flower-100);
--focus-ring:0 0 0 3px rgba(86,138,78,.35);
}

:root{
--font-display:"Gloock","Georgia",serif;
--font-body:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--text-display:clamp(48px,6vw,80px);--text-h1:clamp(38px,4.4vw,56px);--text-h2:clamp(30px,3.2vw,40px);--text-h3:28px;--text-h4:21px;
--text-lg:19px;--text-md:17px;--text-sm:15px;--text-xs:13px;--text-eyebrow:12px;
--leading-tight:1.05;--leading-snug:1.2;--leading-body:1.55;
--tracking-display:-0.015em;--tracking-eyebrow:0.14em;
/* Semantic roles */
--type-display:400 var(--text-display)/var(--leading-tight) var(--font-display);
--type-h1:400 var(--text-h1)/var(--leading-tight) var(--font-display);
--type-h2:400 var(--text-h2)/var(--leading-snug) var(--font-display);
--type-h3:400 var(--text-h3)/var(--leading-snug) var(--font-display);
--type-h4:600 var(--text-h4)/1.3 var(--font-body);
--type-body-lg:400 var(--text-lg)/var(--leading-body) var(--font-body);
--type-body:400 var(--text-md)/var(--leading-body) var(--font-body);
--type-small:400 var(--text-sm)/1.5 var(--font-body);
--type-caption:500 var(--text-xs)/1.4 var(--font-body);
--type-eyebrow:600 var(--text-eyebrow)/1 var(--font-body);
--type-price:400 28px/1 var(--font-display);
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--container-max:1200px;--container-text:680px;
--gutter:clamp(20px,4vw,48px); /* @kind spacing */

--radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;--radius-pill:999px;
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:54px;
}

:root{
--shadow-xs:0 1px 2px rgba(23,41,28,.06);
--shadow-sm:0 1px 2px rgba(23,41,28,.06),0 4px 12px -4px rgba(23,41,28,.10);
--shadow-md:0 2px 4px rgba(23,41,28,.05),0 12px 28px -10px rgba(23,41,28,.20);
--shadow-lg:0 4px 8px rgba(23,41,28,.05),0 28px 56px -18px rgba(23,41,28,.30);
--shadow-inset:inset 0 1px 2px rgba(23,41,28,.08);
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.6,0,.3,1); /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--scrim-photo:linear-gradient(180deg,rgba(17,30,20,0) 35%,rgba(17,30,20,.72) 100%); /* @kind color */
--scrim-overlay:rgba(17,30,20,.48);
--blur-glass:saturate(1.4) blur(14px); /* @kind other */
}