/* ==========================================================================
   Nymölla Skog – design tokens
   Values extracted from the PSD files (layer styles, text engine, fills, FX).
   "derived" = not in the PSD, chosen from existing tokens (see psd-spec.md).
   Fluid values interpolate linearly between the 360 px and 1920 px designs.
   ========================================================================== */
:root {
  /* ---- Brand palette (PM brief) ---- */
  --ns-green-dark: #1a2e2a;   /* Mörkgrön */
  --ns-green: #345753;        /* Grön */
  --ns-rust: #9c5c35;         /* Rostbrun */
  --ns-bark: #807363;         /* Barkbrun */
  --ns-beige-dark: #f0ebdd;   /* Mörkbeige */
  --ns-beige-light: #f8f6ee;  /* Ljusbeige – most "white" in the design is this */

  /* ---- Variants found in the PSD ---- */
  --ns-beige-deep: #e9e2cf;   /* footer bg, forest silhouette, tag border, social glyph on hover */
  --ns-green-muted: #88a09d;  /* contact role text ("Virkesköpare") */
  --ns-green-line: #5d7975;   /* divider in the contact card */
  --ns-edge-line: #404b42;    /* 1px lines at hero media edges when viewport > 1920px */
  --ns-white: #ffffff;        /* tag fill, active tag text + inner border, phone/email, header-button hover text */

  /* ---- Semantic ---- */
  --color-page-bg: var(--ns-beige-light);
  --color-intro-bg: var(--ns-beige-dark);
  --color-footer-bg: var(--ns-beige-deep);
  --color-heading: var(--ns-green);
  --color-text: var(--ns-bark);
  --color-text-strong: var(--ns-green);
  --color-on-dark: var(--ns-beige-light);
  --color-hero-bg: var(--ns-green-dark);
  --hero-overlay: rgb(26 46 42 / 0.8);         /* PSD "Overlay 80%" */
  --photo-tint: rgb(26 46 42 / 0.08);          /* over contact photo (mobile PSD 0.10) */
  --map-area-fill: #9c5c35;                     /* Google Maps polygon fillColor */
  --map-area-fill-opacity: 0.2;                 /* strokeWeight 0 */
  --focus-ring-light-bg: var(--ns-rust);        /* derived */
  --focus-ring-dark-bg: var(--ns-beige-light);  /* derived */

  /* ---- Typography ---- */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --tracking-heading: -0.02em;                  /* PSD tracking -20 */

  --fs-display: clamp(40px, 33.08px + 1.923vw, 70px);     /* H1 + all H2 (Source Serif 4 600) */
  --lh-display: clamp(44px, 36.62px + 2.051vw, 76px);
  --fs-hero-lead: clamp(14px, 12.62px + 0.385vw, 20px);   /* Inter 400 */
  --lh-hero-lead: clamp(22px, 20.15px + 0.513vw, 30px);
  --fs-body: clamp(14px, 13.08px + 0.256vw, 18px);        /* Inter 400 / 600 */
  --lh-body: clamp(22px, 20.62px + 0.385vw, 28px);
  --fs-small: clamp(14px, 13.54px + 0.128vw, 16px);       /* card role, phone/email, empty-state text */
  --lh-small: clamp(22px, 21.54px + 0.128vw, 24px);
  --fs-card-name: clamp(24px, 21.69px + 0.641vw, 34px);   /* Source Serif 4 600, line-height 1 */
  --fs-empty-title: clamp(22px, 20.62px + 0.385vw, 28px); /* Source Serif 4 400; mobile value derived */
  --lh-empty-title: 1.2143;                                /* 34 / 28 */
  --fs-button: clamp(13.5px, 12.92px + 0.16vw, 16px);     /* Inter 600 */
  --fs-ui: clamp(12px, 11.54px + 0.128vw, 14px);          /* tags 400, header button 600, tooltip 600 – 12px floor is a deviation (mobile PSD 9–9.8px) */
  --lh-ui: 24px;

  /* ---- Layout ---- */
  --container-max: 1620px;                                 /* content box at 1920 = x150–1770 */
  --gutter: clamp(22px, -7.54px + 8.205vw, 150px);         /* 22 at 360, 150 at 1920 */
  --grid-gap: clamp(24px, 3.5px + 5.128vw, 100px);         /* hero/intro columns: 760 | 100 | 760 at 1920 */
  --map-card-gap: 40px;                                     /* stacked below 1024px: 10px */
  --hero-media-max: 1920px;

  /* ---- Shape ---- */
  --radius-card: 10px;              /* map box, contact card, empty card, hero photo (PSD 9–10) */
  --radius-card-mobile: 8px;        /* map + card in mobile PSD */
  --radius-hero-photo-mobile: 4px;  /* photo scaled down in mobile PSD */
  --radius-pill: 999px;             /* buttons, header button, tags, tooltip */
  --border-tag: 2px;                /* inside stroke */
  --border-btn-secondary: 2px;      /* rgb(255 255 255 / .2); mobile PSD 1px */

  /* ---- Components ---- */
  --btn-height: clamp(49px, 46.92px + 0.577vw, 58px);
  --btn-padding-x: 32px;
  --header-btn-height: clamp(32px, 28.77px + 0.897vw, 46px); /* PSD 29 → 46; mobile raised to 32 for 12px text */
  --tag-height: clamp(32px, 28.77px + 0.897vw, 46px);
  --tag-padding-x: clamp(16px, 14.15px + 0.513vw, 24px);
  --tag-gap: clamp(5px, 4.54px + 0.128vw, 7px);
  --tag-row-gap: 10px;
  --pin-size: 28px;
  --pin-dot: 12px;
  --pin-ring-1: 54px;   --pin-ring-1-opacity: 0.4;
  --pin-ring-2: 86px;   --pin-ring-2-opacity: 0.2;
  --pin-soon-opacity: 0.4;
  --close-btn-size: 45px;
  --social-size: 51px;
  --social-ring: 2px;

  /* ---- Effects ---- */
  /* The PSD value (black, "Multiply" blend, 75%/74% opacity, size 185/21) is
     much softer in the actual design slices than the same opacity ported
     straight to box-shadow, which always composites like a "Normal" blend
     (Multiply preserves the lighter background underneath far more than
     Normal alpha blending does) — re-tuned by eye against
     `design_images/Landningssida.jpg` (PROGRESS.md step 7) so the shadow
     reads as the same soft halo instead of a hard black smear. */
  --shadow-hero-photo: 0 0 80px rgb(0 0 0 / 0.35);
  --shadow-hero-photo-mobile: 0 0 12px rgb(0 0 0 / 0.32);
  --shadow-tooltip: 0 8px 24px rgb(26 46 42 / 0.18);       /* derived */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}
/* Breakpoints (media queries can't read custom properties):
   768px tablet · 1024px desktop two-column layouts · 1920px wide (content stops growing) */