/* =========================================================================
   IAN EN WIJN — Color & Type foundations
   =========================================================================
   Imported from the Claude Design System project "Ian en Wijn Design System"
   (df0921b2-0b68-44c2-94e7-b5f37c84d101). The Google Fonts @import was replaced
   with self-hosted @font-face below; everything else is the project's tokens.
   ========================================================================= */

/* ---------- Fonts (self-hosted, variable; latin + latin-ext) --------------
   Inter for body/UI, Montserrat for HEADINGS (kept light/medium). Loaded
   locally from ../fonts — no Google Fonts CDN (faster + GDPR-clean for NL).
   The hand-script ("Jan") stays image-only; never recreate it with a webfont.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/inter-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: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/montserrat-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: 'Montserrat';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Colors --------------------------------------------------------
   Core brand is two colors: Olive and Gold. Everything else is a support
   tint — mostly pulled directly from the wine-category illustrations.
   ------------------------------------------------------------------------- */
:root {
  /* ---- Brand core ---- */
  --iew-olive-900:  #2E3625;   /* deepest, for footers / hover states */
  --iew-olive-800:  #3A4430;   /* 1-step down */
  --iew-olive-700:  #434C37;   /* BRAND GREEN — sampled from logo bg */
  --iew-olive-600:  #515B44;   /* card tint */
  --iew-olive-500:  #6A7559;   /* muted */
  --iew-olive-200:  #CED1C3;   /* soft green wash */
  --iew-olive-100:  #E8EAE0;   /* page tint */

  --iew-gold-600:   #C99A2A;   /* pressed / dark */
  --iew-gold-500:   #F1BB47;   /* BRAND GOLD — sampled from logo */
  --iew-gold-400:   #F4C766;   /* hover lift */
  --iew-gold-100:   #FBEECB;   /* tint / highlight */

  /* ---- Wine category tints (from the 4 bottle illustrations) ---- */
  --iew-cat-red:     #A0503C;  /* Rood / Rouge */
  --iew-cat-white:   #EBE8C0;  /* Wit / Blanc */
  --iew-cat-rose:    #EBCEC0;  /* Rosé */
  --iew-cat-bubbles: #C8F0C8;  /* Mousserend / Champagne */
  --iew-cat-orange:  #E4B075;  /* Oranje */
  --iew-cat-port:    #6B2636;  /* Port / Versterkt */

  /* Wine-red ink — used as accent on product cards (category, price, icons). */
  --iew-wine-700:    #6B1F28;  /* pressed */
  --iew-wine-600:    #7A1E28;  /* DEFAULT accent */
  --iew-wine-500:    #8E2733;  /* hover lift */
  --iew-wine-100:    #F5E4E6;  /* tinted bg */

  /* ---- Bordeauxrood — official equal brand colour (style guide §04) ---- */
  --iew-bordeaux-700: #3E1820;  /* pressed / deepest */
  --iew-bordeaux-600: #4E1F28;  /* BRAND BORDEAUX — official #4E1F28 */
  --iew-bordeaux-500: #5E2731;  /* hover lift */
  --iew-bordeaux-100: #EFDFE1;  /* soft tint */

  /* ---- Neutrals (paper & ink) ---- */
  --iew-paper:      #FBF8F2;   /* warm off-white, page background */
  --iew-paper-2:    #F2EDE3;   /* sectional alt */
  --iew-ink-900:    #1B1D18;   /* near-black, body copy on paper */
  --iew-ink-700:    #2F322B;
  --iew-ink-500:    #6B6E63;   /* muted ink */
  --iew-ink-300:    #B9BBB1;   /* hairline / divider */
  --iew-ink-100:    #E9E8E1;

  /* ---- Semantic ---- */
  --iew-success:    #4E7A3F;
  --iew-warning:    #D98A2B;
  --iew-error:      #B2413B;
  --iew-info:       #3F6B7A;

  /* ---- Surfaces ---- */
  --iew-bg:           var(--iew-paper);
  --iew-bg-inverse:   var(--iew-olive-700);
  --iew-surface:      #FFFFFF;
  --iew-surface-alt:  var(--iew-paper-2);
  --iew-border:       var(--iew-ink-300);
  --iew-border-soft:  var(--iew-ink-100);

  /* ---- Fg / text ---- */
  --iew-fg-1:          var(--iew-ink-900);      /* primary copy */
  --iew-fg-2:          var(--iew-ink-700);      /* secondary copy */
  --iew-fg-3:          var(--iew-ink-500);      /* meta / captions */
  --iew-fg-onDark-1:   var(--iew-paper);        /* copy on olive */
  --iew-fg-onDark-2:   #C9CBBD;                 /* secondary on olive */
  --iew-fg-accent:     var(--iew-gold-500);

  /* ---------- Type ---------- */
  --iew-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --iew-font-heading:  'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --iew-font-display:  'Montserrat', 'Helvetica Neue', sans-serif;
  --iew-font-reading:  var(--iew-font-sans);
  --iew-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (based on 16px root, modular 1.25) */
  --iew-text-xs:    12px;
  --iew-text-sm:    14px;
  --iew-text-base:  16px;
  --iew-text-md:    18px;
  --iew-text-lg:    22px;
  --iew-text-xl:    28px;
  --iew-text-2xl:   36px;
  --iew-text-3xl:   48px;
  --iew-text-4xl:   64px;
  --iew-text-5xl:   80px;

  /* Weights */
  --iew-w-light:    300;
  --iew-w-regular:  400;
  --iew-w-medium:   500;
  --iew-w-semi:     600;
  --iew-w-bold:     700;
  --iew-w-black:    800;

  /* Line heights */
  --iew-lh-tight:   1.1;
  --iew-lh-snug:    1.25;
  --iew-lh-normal:  1.5;
  --iew-lh-relaxed: 1.7;

  /* Letter spacing — upper-case labels get generous tracking (logo DNA) */
  --iew-track-label: 0.22em;
  --iew-track-caps:  0.12em;
  --iew-track-tight: -0.01em;

  /* ---------- Spacing (4px base) ---------- */
  --iew-space-1:   4px;
  --iew-space-2:   8px;
  --iew-space-3:   12px;
  --iew-space-4:   16px;
  --iew-space-5:   24px;
  --iew-space-6:   32px;
  --iew-space-7:   48px;
  --iew-space-8:   64px;
  --iew-space-9:   96px;
  --iew-space-10: 128px;

  /* ---------- Radii ---------- */
  --iew-radius-xs:  2px;
  --iew-radius-sm:  4px;
  --iew-radius-md:  8px;
  --iew-radius-lg:  14px;
  --iew-radius-xl:  24px;
  --iew-radius-pill: 999px;

  /* ---------- Shadows (soft, paper-like) ---------- */
  --iew-shadow-xs:  0 1px 2px rgba(27, 29, 24, 0.06);
  --iew-shadow-sm:  0 2px 6px rgba(27, 29, 24, 0.08);
  --iew-shadow-md:  0 8px 24px rgba(27, 29, 24, 0.10);
  --iew-shadow-lg:  0 20px 48px rgba(27, 29, 24, 0.14);
  --iew-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.7);

  /* ---------- Motion ---------- */
  --iew-ease:         cubic-bezier(.2, .7, .2, 1);
  --iew-ease-out:     cubic-bezier(.16, 1, .3, 1);
  --iew-dur-fast:     120ms;
  --iew-dur:          220ms;
  --iew-dur-slow:     420ms;

  /* ---------- Brand gradients ---------- */
  --iew-grad-olive:    linear-gradient(145deg, #515B44 0%, #3A4430 55%, #2E3625 100%);
  --iew-grad-bordeaux: linear-gradient(145deg, #5E2731 0%, #4E1F28 55%, #3E1820 100%);
  --iew-grad-gold:     linear-gradient(145deg, #F4C766 0%, #F1BB47 50%, #C99A2A 100%);
  --iew-grad-brand:    linear-gradient(120deg, #434C37 0%, #515B44 40%, #C99A2A 115%);
  --iew-grad-paper:    linear-gradient(160deg, #FBF8F2 0%, #F2EDE3 100%);
  --iew-grad-halo:     radial-gradient(ellipse at 75% 25%, rgba(241,187,71,0.18) 0%, rgba(241,187,71,0) 60%);
}

/* =========================================================================
   Semantic typography primitives
   Apply these classes OR re-use the values via var(--iew-text-...)
   ========================================================================= */

.iew-display {
  font-family: var(--iew-font-display);
  font-weight: var(--iew-w-medium);
  font-size: var(--iew-text-5xl);
  line-height: var(--iew-lh-tight);
  letter-spacing: var(--iew-track-tight);
  text-transform: uppercase;
}
.iew-h1 {
  font-family: var(--iew-font-heading);
  font-weight: var(--iew-w-medium);
  font-size: var(--iew-text-3xl);
  line-height: var(--iew-lh-tight);
  letter-spacing: var(--iew-track-tight);
}
.iew-h2 {
  font-family: var(--iew-font-heading);
  font-weight: var(--iew-w-medium);
  font-size: var(--iew-text-2xl);
  line-height: var(--iew-lh-snug);
}
.iew-h3 {
  font-family: var(--iew-font-heading);
  font-weight: var(--iew-w-medium);
  font-size: var(--iew-text-xl);
  line-height: var(--iew-lh-snug);
}
.iew-h4 {
  font-family: var(--iew-font-heading);
  font-weight: var(--iew-w-medium);
  font-size: var(--iew-text-lg);
  line-height: var(--iew-lh-snug);
}
.iew-lede {
  font-family: var(--iew-font-sans);
  font-weight: var(--iew-w-regular);
  font-size: var(--iew-text-md);
  line-height: var(--iew-lh-relaxed);
  color: var(--iew-fg-2);
}
.iew-body {
  font-family: var(--iew-font-sans);
  font-weight: var(--iew-w-regular);
  font-size: var(--iew-text-base);
  line-height: var(--iew-lh-relaxed);
  color: var(--iew-fg-1);
}
.iew-reading {
  font-family: var(--iew-font-reading);
  font-weight: var(--iew-w-regular);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: var(--iew-fg-1);
  max-width: 64ch;
}
.iew-reading--lg { font-size: 19px; line-height: 1.8; }
.iew-small {
  font-family: var(--iew-font-sans);
  font-weight: var(--iew-w-regular);
  font-size: var(--iew-text-sm);
  line-height: var(--iew-lh-normal);
  color: var(--iew-fg-2);
}
.iew-meta {
  font-family: var(--iew-font-sans);
  font-weight: var(--iew-w-medium);
  font-size: var(--iew-text-xs);
  line-height: var(--iew-lh-normal);
  color: var(--iew-fg-3);
}
/* LABEL — the brand's signature text treatment: uppercase, wide tracking. */
.iew-label {
  font-family: var(--iew-font-sans);
  font-weight: var(--iew-w-semi);
  font-size: var(--iew-text-sm);
  line-height: var(--iew-lh-snug);
  letter-spacing: var(--iew-track-label);
  text-transform: uppercase;
}
.iew-eyebrow {
  font-family: var(--iew-font-sans);
  font-weight: var(--iew-w-bold);
  font-size: var(--iew-text-xs);
  line-height: var(--iew-lh-snug);
  letter-spacing: var(--iew-track-label);
  text-transform: uppercase;
  color: var(--iew-gold-600);
}

/* =========================================================================
   Base resets — safe, opt-in via .iew-scope
   ========================================================================= */
.iew-scope, .iew-scope * { box-sizing: border-box; }
.iew-scope {
  font-family: var(--iew-font-sans);
  color: var(--iew-fg-1);
  background: var(--iew-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.iew-scope a { color: inherit; text-decoration: none; }
.iew-scope a:hover { color: var(--iew-gold-600); }
.iew-scope ::selection { background: var(--iew-gold-500); color: var(--iew-olive-900); }