/**
 * Webbhult Design System
 * =======================
 * Ändra värden här – hela webbplatsen följer med.
 * Komponenten i assets/css/components.css läser bara dessa tokens.
 *
 * Grupper: Färger · Typografi · Spacing · Form · Rörelse · Z-index
 */

:root {
  /* ─────────────────────────────────────────
     FÄRGER
     Blekinge-grön (skog) + Falu-röd (CTA)
     ───────────────────────────────────────── */
  --kh-skog-950: #0A1812;
  --kh-skog-900: #10261D;   /* Primär – djup skog */
  --kh-skog-800: #163528;
  --kh-skog-700: #1B4433;
  --kh-skog-600: #245841;
  --kh-skog-500: #2F6B52;
  --kh-skog-400: #4A8A6C;
  --kh-skog-300: #7AB097;
  --kh-skog-200: #B5D4C5;
  --kh-skog-100: #DCEBE3;

  --kh-falu-700: #6F241D;   /* Push-skugga under CTA */
  --kh-falu-600: #8E2F26;   /* Primär CTA */
  --kh-falu-500: #A8382C;
  --kh-falu-400: #C45A4E;
  --kh-falu-100: #F5E4E1;

  --kh-sand:     #EFE9DE;   /* Varm bento-yta */
  --kh-sand-deep:#E4DAC8;
  --kh-sjo:      #DEE9E6;   /* Kall bento-yta */
  --kh-sjo-deep: #C8DBD6;
  --kh-moss:     #E4ECDF;   /* Extra bento-ton */
  --kh-bark:     #E8E0D4;

  --kh-bg:       #F8F8F5;   /* Tech-white / sida-bakgrund */
  --kh-surface:  #FFFFFF;
  --kh-ink:      #121A16;   /* Brödtext / rubriker */
  --kh-muted:    #5A6961;   /* Sekundärtext */
  --kh-line:     rgba(18, 26, 22, 0.10);
  --kh-overlay:  rgba(16, 38, 29, 0.72);

  /* ─────────────────────────────────────────
     TYPOGRAFI
     Familjen Grotesk = rubriker (svensk)
     Inter = brödtext
     ───────────────────────────────────────── */
  --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);   /* 13–14 */
  --kh-step-0:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);    /* 15–17 */
  --kh-step-1:  clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);        /* 17–20 */
  --kh-step-2:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);         /* 20–24 */
  --kh-step-3:  clamp(1.5rem, 1.25rem + 1vw, 2rem);             /* 24–32 */
  --kh-step-4:  clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);       /* 30–44 */
  --kh-step-5:  clamp(2.5rem, 1.8rem + 2.8vw, 3.75rem);         /* 40–60 */
  --kh-step-6:  clamp(2.65rem, 0.4rem + 4.4vw + 0.8vh, 11rem);   /* wächst bis 4K */

  /* Underlängor (g, j, p, å) behöver luft – håll inte under 1.1 */
  --kh-leading-tight: 1.1;
  --kh-leading-snug:  1.18;
  --kh-leading-body:  1.65;
  --kh-tracking-tight: -0.03em;
  --kh-tracking-wide:  0.12em;
  /* Extra utrymme under rubriker så inget klipps av */
  --kh-descender-pad: 0.14em;

  /* ─────────────────────────────────────────
     SPACING
     ───────────────────────────────────────── */
  --kh-space-1:  0.25rem;   /* 4 */
  --kh-space-2:  0.5rem;    /* 8 */
  --kh-space-3:  0.75rem;   /* 12 */
  --kh-space-4:  1rem;      /* 16 */
  --kh-space-5:  1.25rem;   /* 20 */
  --kh-space-6:  1.5rem;    /* 24 */
  --kh-space-8:  2rem;      /* 32 */
  --kh-space-10: 2.5rem;    /* 40 */
  --kh-space-12: 3rem;      /* 48 */
  --kh-space-16: 4rem;      /* 64 */
  --kh-space-20: 5rem;      /* 80 */
  --kh-space-24: 6rem;      /* 96 */

  --kh-section-y: clamp(3rem, 2.2rem + 3vw + 1.5vh, 7rem);
  --kh-container: 72rem;    /* 1152px */
  --kh-gutter: clamp(1.25rem, 4vw, 2rem);

  /* ─────────────────────────────────────────
     FORM / RADIER / SKUGGOR
     ───────────────────────────────────────── */
  --kh-radius-sm:   0.5rem;
  --kh-radius-md:   1rem;
  --kh-radius-lg:   1.5rem;
  --kh-radius-xl:   2rem;
  --kh-radius-pill: 100vmax;

  --kh-shadow-card: 0 8px 28px rgba(16, 38, 29, 0.08);
  --kh-shadow-soft: 0 4px 16px rgba(16, 38, 29, 0.06);
  --kh-shadow-nav:  0 8px 32px rgba(16, 38, 29, 0.12);
  --kh-shadow-push: 0 6px 0 var(--kh-falu-700);
  --kh-shadow-push-hover: 0 4px 0 var(--kh-falu-700);
  --kh-shadow-push-skog: 0 6px 0 var(--kh-skog-700);
  --kh-shadow-push-skog-hover: 0 4px 0 var(--kh-skog-700);

  /* ─────────────────────────────────────────
     RÖRELSE
     ───────────────────────────────────────── */
  --kh-dur-fast: 0.2s;
  --kh-dur-base: 0.4s;
  --kh-dur-slow: 0.7s;
  --kh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kh-ease-pill: cubic-bezier(0.4, 0, 0.2, 1);
  --kh-ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --kh-hero-parallax: 22px;    /* textblock mot musen */
  --kh-hero-parallax-bg: 16px; /* bakgrund, mot texten */

  /* ─────────────────────────────────────────
     STICKY CARD STACK (sektion "Tre saker")
     ───────────────────────────────────────── */
  --kh-stack-pin-top: 18vh;   /* var rubriken fastnar */
  --kh-stack-gap: 7vh;        /* avstånd mellan rubrik och stacken */
  --kh-stack-hold: 34vh;      /* hur länge stacken hålls kvar innan unpin */
  --kh-stack-layer: 16px;     /* överlapp i färdig stack */
  --kh-stack-scale: 0.94;

  /* ─────────────────────────────────────────
     PROCESS (Så går det till)
     ───────────────────────────────────────── */
  --kh-process-pin-top: 7rem;   /* var grafik + kort fastnar */
  --kh-process-slot: 68vh;      /* scrollhöjd per steg efter #1 */
  --kh-process-slot-first: 92vh; /* extra hold efter att sektionen låst */

  /* ─────────────────────────────────────────
     Z-INDEX
     ───────────────────────────────────────── */
  --kh-z-totop: 50;
  --kh-z-nav: 60;
  --kh-z-menu: 70;
  --kh-z-toast: 80;
  --kh-z-modal: 90;
  --kh-z-curtain: 100;  /* sidövergång – täcker allt, även modaler */
}

@media (max-width: 767px) {
  :root {
    --kh-stack-pin-top: 12vh;
    --kh-stack-gap: 5vh;
    --kh-stack-hold: 26vh;
  }
}

/* Laptop / låg viewport: 1200–1300 × 800–1000 */
@media (max-height: 1000px) and (min-width: 900px) {
  :root {
    --kh-step-4: clamp(1.5rem, 1.15rem + 1.1vw + 0.6vh, 2.15rem);
    --kh-step-6: clamp(3rem, 1.35rem + 2.5vw + 2.7vh, 4.5rem);
    --kh-section-y: clamp(2.5rem, 4.5vh, 3.75rem);
    --kh-stack-pin-top: 10vh;
    --kh-stack-gap: 3.5vh;
    --kh-stack-hold: 26vh;
  }
}

@media (max-height: 860px) and (min-width: 900px) {
  :root {
    --kh-step-6: clamp(2.9rem, 1.3rem + 2.4vw + 2.6vh, 4.25rem);
    --kh-stack-pin-top: 8vh;
    --kh-stack-gap: 2.4vh;
    --kh-stack-hold: 22vh;
  }
}

/* Große / 4K-Screens: Hero-Typo darf weiter wachsen */
@media (min-width: 1600px) and (min-height: 901px) {
  :root {
    --kh-step-6: clamp(3.75rem, 0.2rem + 4.8vw, 11rem);
    --kh-step-1: clamp(1.125rem, 0.85rem + 0.5vw, 1.625rem);
  }
}

/* Reduced motion – global fallback */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kh-dur-fast: 0.01ms;
    --kh-dur-base: 0.01ms;
    --kh-dur-slow: 0.01ms;
  }
}