/* Holz PEMM design tokens — extracted from prototype, do not edit by hand */
/* ============================================================
   Holz PEMM — Colors & Type
   Authentic x Ecological x Artisanal. German wood retailer.
   Brand: Holz PEMM   Legal entity: PEMM
   ============================================================ */

/* ─── Self-hosted display: Vollkorn ─────────────────────────── */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Vollkorn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Vollkorn-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Vollkorn-Bold.woff2') format('woff2');
}

/* ─── Self-hosted body: IBM Plex Sans ───────────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/IBMPlexSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}

/* ─── Self-hosted mono: IBM Plex Mono ───────────────────────── */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

/* ─── Italic variants ─────────────────────────────────────── */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Vollkorn-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Vollkorn-SemiBoldItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexSans-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
}

:root {
  /* ─── Brand: Forest ─────────────────────────────────────── */
  --c-forest:        #1B3A2B;   /* primary — headings, CTA, footer */
  --c-forest-deep:   #0F2519;   /* pressed, deep sections */
  --c-moss:          #5C7A4B;   /* secondary — tags, link hover */
  --c-sage:          #B8C9A5;   /* light tint, hover surface */
  --c-sage-pale:     #E2EAD6;   /* faintest sage — panel tint */

  /* ─── Brand: Amber (fire / warm accent) ─────────────────── */
  --c-amber:         #C8893D;   /* accent — fire-pill CTA, flames */
  --c-amber-deep:    #9C6A2B;
  --c-amber-light:   #E8B673;

  /* ─── Brand: Wood & bark ────────────────────────────────── */
  --c-bark:          #2A1B0F;   /* deep body text — softer than black */
  --c-bark-mid:      #6B5544;   /* muted text, metadata */
  --c-wood:          #D4B896;   /* warm beige surface */
  --c-wood-light:    #E8DCC4;   /* lighter wood */

  /* ─── Paper backgrounds ─────────────────────────────────── */
  --c-paper:         #FFFEF9;   /* highest elevation, almost-white but warm */
  --c-ivory:         #FAF7EE;   /* section bg, lighter than cream */
  --c-cream:         #F5F1E8;   /* page bg (default) */

  /* ─── Warm stone neutrals (use sparingly) ───────────────── */
  --c-stone-50:      #F0EBE0;
  --c-stone-100:     #E2DAC9;
  --c-stone-200:     #CDC1AB;
  --c-stone-300:     #A89C84;
  --c-stone-400:     #7A6E58;
  --c-stone-500:     #534938;
  --c-stone-600:     #3A3127;
  --c-stone-700:     #2A2219;

  /* ─── Semantic (warm, never corporate) ──────────────────── */
  --c-success:       #3F6B3F;   /* leaf green */
  --c-success-soft:  rgba(63,107,63,0.12);
  --c-error:         #B5462C;   /* terracotta — handmade, not red-red */
  --c-error-soft:    rgba(181,70,44,0.12);
  --c-warning:       #C8893D;
  --c-warning-soft:  rgba(200,137,61,0.14);
  --c-info:          #3A5A6C;   /* wet-stone slate blue */
  --c-info-soft:     rgba(58,90,108,0.12);

  /* ─── Overlays ──────────────────────────────────────────── */
  --c-overlay-forest:   rgba(15,37,25,0.35);
  --c-overlay-forest-2: rgba(15,37,25,0.55);
  --c-overlay-bark:     rgba(42,27,15,0.55);

  /* ─── Type families ─────────────────────────────────────── */
  --ff-display: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --ff-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Type scale (semantic) ─────────────────────────────── */
  --fs-display: 4rem;     /* 64  — T1 hero */
  --fs-h1:      3rem;     /* 48  — T2 page title */
  --fs-h2:      2.25rem;  /* 36  — T3 compact / section */
  /* H1 tier aliases (Theme 1 — single source of truth) */
  --fs-h1-lg:   var(--fs-display); /* 64 — home + editorial heroes */
  --fs-h1-md:   var(--fs-h1);      /* 48 — section, PDP, about */
  --fs-h1-sm:   var(--fs-h2);      /* 36 — auth, account, transactional */
  --fs-h3:      1.5rem;   /* 24 */
  --fs-h4:      1.25rem;  /* 20 */
  --fs-lead:    1.1875rem;/* 19 */
  --fs-body:    1.0625rem;/* 17 */
  --fs-small:   0.9375rem;/* 15 */
  --fs-xs:      0.8125rem;/* 13 */
  --fs-eyebrow: 0.75rem;  /* 12 */

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-base:    1.65;
  --lh-loose:   1.8;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.18em;
  --tracking-wordmark: 0.20em;

  /* ─── Spacing — 8px base, generous ──────────────────────── */
  --sp-xs:   0.25rem;   /* 4  */
  --sp-sm:   0.5rem;    /* 8  */
  --sp-md:   1rem;      /* 16 */
  --sp-lg:   1.5rem;    /* 24 */
  --sp-xl:   2.5rem;    /* 40 */
  --sp-2xl:  4rem;      /* 64 */
  --sp-3xl:  6rem;      /* 96 */
  --sp-4xl:  8rem;      /* 128 — section padding */
  --sp-5xl:  10rem;     /* 160 */

  /* ─── Radii — small, architectural ──────────────────────── */
  --r-sm:    3px;
  --r-md:    6px;       /* cards default */
  --r-lg:    10px;
  --r-xl:    14px;
  --r-2xl:   20px;
  --r-pill:  9999px;

  /* ─── Shadows — bark-tinted, never grey ─────────────────── */
  --sh-sm:    0 1px  2px rgba(42,27,15,0.06);
  --sh-md:    0 4px 12px rgba(42,27,15,0.08);
  --sh-lg:    0 12px 32px rgba(42,27,15,0.10);
  --sh-xl:    0 24px 56px rgba(42,27,15,0.14);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.4);

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-quiet:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  200ms var(--ease-standard);
  --t-base:  320ms var(--ease-standard);
  --t-slow:  480ms var(--ease-quiet);

  /* ─── Z-index ladder ────────────────────────────────────── */
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-overlay:  1040;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-tooltip:  1070;
  --z-toast:    1080;

  /* ─── Layout ────────────────────────────────────────────── */
  --layout-max:     1320px;
  --layout-narrow:  720px;
  --header-h:       80px;
}