/**
 * Carl Blomquist Snickeri — Design System
 * Eigenständige Handwerksmarke (nicht Webbhult-Klon).
 * Webbhult-Footer/Tutorial nutzen eigene --kh-* Tokens unten.
 */

:root {
  /* ─── Carl: Holz & Papier ─── */
  --cb-oak:        #C4A574;
  --cb-oak-deep:   #A88858;
  --cb-walnut:     #3D2A1F;
  --cb-walnut-mid: #5A4032;
  --cb-resin:      #1C1410;
  --cb-paper:      #F4EFE6;
  --cb-sawdust:    #E8DFD0;
  --cb-copper:     #B85C38;
  --cb-copper-deep:#8F4529;
  --cb-copper-soft:#E8C4B4;
  --cb-ink:        #1A1410;
  --cb-muted:      #6B5E54;
  --cb-line:       rgba(28, 20, 16, 0.12);
  --cb-surface:    #FFFFFF;
  --cb-overlay:    rgba(28, 20, 16, 0.68);

  --cb-font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --cb-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --cb-step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --cb-step-0:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --cb-step-1:  clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --cb-step-2:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --cb-step-3:  clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --cb-step-4:  clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --cb-step-5:  clamp(2.5rem, 1.8rem + 2.8vw, 3.75rem);
  --cb-step-6:  clamp(2.75rem, 1.6rem + 3.5vw, 4.5rem);

  --cb-leading-tight: 1.08;
  --cb-leading-snug:  1.18;
  --cb-leading-body:  1.65;
  --cb-tracking-tight: -0.03em;
  --cb-tracking-wide:  0.14em;
  --cb-descender-pad: 0.14em;

  --cb-space-1:  0.25rem;
  --cb-space-2:  0.5rem;
  --cb-space-3:  0.75rem;
  --cb-space-4:  1rem;
  --cb-space-5:  1.25rem;
  --cb-space-6:  1.5rem;
  --cb-space-8:  2rem;
  --cb-space-10: 2.5rem;
  --cb-space-12: 3rem;
  --cb-space-16: 4rem;
  --cb-space-20: 5rem;

  --cb-section-y: clamp(3rem, 2.2rem + 3vw + 1.5vh, 7rem);
  --cb-container: 72rem;
  --cb-gutter: clamp(1.25rem, 4vw, 2rem);

  --cb-radius-sm:   0.5rem;
  --cb-radius-md:   0.875rem;
  --cb-radius-lg:   1.25rem;
  --cb-radius-xl:   1.75rem;
  --cb-radius-pill: 100vmax;

  --cb-shadow-card: 0 10px 32px rgba(28, 20, 16, 0.1);
  --cb-shadow-soft: 0 4px 16px rgba(28, 20, 16, 0.07);
  --cb-shadow-nav:  0 8px 28px rgba(28, 20, 16, 0.12);
  --cb-shadow-push: 0 5px 0 var(--cb-copper-deep);

  --cb-dur-fast: 0.2s;
  --cb-dur-base: 0.4s;
  --cb-dur-slow: 0.7s;
  --cb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --cb-pin-top: 18vh;
  --cb-stack-hold: 45vh;
  --cb-stack-layer: 14px;
  /* Process-style Tjänster: same pin line for image + cards, image optically centered */
  --cb-process-pin-top: max(5.5rem, calc(50dvh - 12.5rem));
  --cb-process-slot: 62vh;
  --cb-process-slot-first: 90vh;
  --cb-z-nav: 100;
  --cb-z-float: 90;
  --cb-z-tutorial: 1000;

  /* ─── Webbhult tokens (Footer + Tutorial-Overlay) ─── */
  --kh-skog-950: #0A1812;
  --kh-skog-900: #10261D;
  --kh-skog-700: #1B4433;
  --kh-skog-500: #2F6B52;
  --kh-skog-400: #4A8A6C;
  --kh-skog-200: #B5D4C5;
  --kh-skog-100: #DCEBE3;
  --kh-falu-700: #6F241D;
  --kh-falu-600: #8E2F26;
  --kh-falu-500: #A8382C;
  --kh-bg:       #F8F8F5;
  --kh-ink:      #121A16;
  --kh-muted:    #5A6961;
  --kh-font-head: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --kh-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --kh-step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --kh-step-0:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --kh-step-2:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --kh-space-2:  0.5rem;
  --kh-space-3:  0.75rem;
  --kh-space-4:  1rem;
  --kh-space-5:  1.25rem;
  --kh-space-6:  1.5rem;
  --kh-space-8:  2rem;
  --kh-space-10: 2.5rem;
  --kh-space-12: 3rem;
  --kh-dur-fast: 0.2s;
  --kh-dur-base: 0.4s;
  --kh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kh-radius-md: 1rem;
  --kh-radius-lg: 1.5rem;
  --kh-container: 72rem;
  --kh-gutter: clamp(1.25rem, 4vw, 2rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cb-dur-fast: 0.01ms;
    --cb-dur-base: 0.01ms;
    --cb-dur-slow: 0.01ms;
  }
}