/* =================================================================
   MAISON DU BOIS — Colors & Type Foundations
   Interieurbouw en maatwerkoplossingen voor historische panden
   Uitstraling: rust · eenvoud · vakmanschap
   -----------------------------------------------------------------
   Fonts: Cormorant Garamond (display/serif) + Mulish (body/UI).
   Cormorant Garamond is the nearest free match to the logo's
   high-contrast classical serif wordmark — see README (FLAGGED).
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Mulish:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- CORE PALETTE ---------------------------------------
     Warm, calm, heritage. Sampled from the brand logo. ----------- */

  /* Paper / surfaces — warm cream tones */
  --paper:        #FAF6F1;   /* primary canvas (sampled bg 250,246,243) */
  --paper-deep:   #F3ECE2;   /* alternating sections, warm */
  --linen:        #EAE0D2;   /* cards, muted blocks */
  --linen-deep:   #E0D5C4;   /* pressed / hovered linen */

  /* Ink — warm espresso text (sampled 61,52,39 → deepened) */
  --ink:          #2B2419;   /* primary text, near-black warm */
  --ink-soft:     #574C3B;   /* secondary text */
  --stone:        #8B7F6B;   /* tertiary text, captions, meta */

  /* Brass — the divider gold (sampled 157,126,86) */
  --brass:        #9D7E56;   /* primary accent */
  --brass-deep:   #7C6240;   /* hover / pressed accent */
  --brass-soft:   #C7AD86;   /* light accent, fills, focus rings */

  /* Walnut — wood warmth, secondary accent */
  --walnut:       #6B4E32;
  --walnut-soft:  #A88A66;

  /* ---------- HERITAGE HUES --------------------------------------
     A richer, period-Dutch palette drawn from historic restoration:
     monument green, petrol/Delft blue, ochre, terracotta. These give
     the brand real colour while staying warm and characterful. Use as
     feature colours, section accents, category tags — one dominant
     hue per surface, never a rainbow. ---------------------------- */
  --green:        #3B4A3A;   /* monumentengroen — deep heritage green */
  --green-soft:   #7E8B6D;   /* sage, lighter green */
  --petrol:       #2B4953;   /* petrol / Delft blue — shutters & doors */
  --petrol-soft:  #6E8C92;
  --ochre:        #C0883B;   /* warm mustard ochre */
  --ochre-soft:   #DDB877;
  --terracotta:   #9A4630;   /* oxblood / terracotta red */
  --terracotta-soft:#C5806C;
  --clay:         #B5704A;   /* mid clay / tan-orange */

  /* Hairlines & dividers */
  --line:         #DCD2C2;   /* hairline borders */
  --line-soft:    #EBE3D6;   /* faint inner dividers */

  /* ---------- SEMANTIC COLOR TOKENS ----------------------------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-deep);
  --surface:      #FFFFFF;        /* slightly raised card on warm paper */
  --surface-muted:var(--linen);
  --border:       var(--line);
  --border-strong:#CFC3AF;

  --fg:           var(--ink);
  --fg-muted:     var(--ink-soft);
  --fg-subtle:    var(--stone);
  --fg-onaccent:  var(--paper);

  --accent:       var(--brass);
  --accent-deep:  var(--brass-deep);
  --accent-soft:  var(--brass-soft);

  /* Quiet semantic states (drawn from the heritage hues) */
  --success:      var(--green-soft);   /* sage */
  --warning:      var(--ochre);        /* ochre */
  --danger:       var(--terracotta);   /* terracotta */
  --info:         var(--petrol);       /* petrol */

  --focus-ring:   rgba(157,126,86,0.40);

  /* ---------- TYPE FAMILIES ------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Mulish', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* ---------- TYPE SCALE (rem, 1rem = 16px) --------------------- */
  --text-xs:   0.75rem;   /* 12px — micro labels */
  --text-sm:   0.875rem;  /* 14px — captions, meta */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead body */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.5rem;    /* 88px — hero display */

  /* ---------- WEIGHTS ------------------------------------------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---------- LINE HEIGHTS & TRACKING -------------------------- */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --track-tight:  -0.01em;
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-wider:  0.14em;   /* eyebrow / label caps — brand signature */
  --track-widest: 0.32em;   /* logo-style spaced caps */

  /* ---------- SPACING SCALE (8pt base, with 4pt halfsteps) ------ */
  --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;

  /* ---------- RADII (soft, restrained) ------------------------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-pill: 999px;
  /* Brand arch motif — used on framed imagery & feature cards */
  --radius-arch: 50% 50% 6px 6px / 22% 22% 6px 6px;

  /* ---------- SHADOWS (soft, warm, low-contrast) --------------- */
  --shadow-xs: 0 1px 2px rgba(43,36,25,0.05);
  --shadow-sm: 0 2px 8px rgba(43,36,25,0.06);
  --shadow-md: 0 8px 24px rgba(43,36,25,0.08);
  --shadow-lg: 0 18px 48px rgba(43,36,25,0.10);

  /* ---------- MOTION ------------------------------------------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);  /* gentle ease-out */
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
}

/* =================================================================
   SEMANTIC TYPE CLASSES
   ================================================================= */

.mdb-display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.mdb-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.mdb-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-3xl);
  line-height: 1.12;
  color: var(--fg);
}

.mdb-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--fg);
}

.mdb-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Eyebrow / label — the brand's signature spaced caps */
.mdb-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--accent);
}

/* Logo-style spaced serif caps (e.g. INTERIEURBOUW) */
.mdb-caps-serif {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--fg);
}

.mdb-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.mdb-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.mdb-small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

/* Pull-quote / motto — calm, italic serif */
.mdb-quote {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}