/* ============================================================
   Jydsk Stoflager — Design Tokens · V4
   One family. Cool snow base. Cobalt as primary surface.
   No more typewriter. No more cream.
   ============================================================ */

:root {
  /* ---------- Color: cool, not warm ---------- */
  --cobalt:        #1F5DC4;
  --cobalt-deep:   #0E3E94;
  --cobalt-soft:   #4A82DB;
  --cobalt-tint:   #E8EFFB;
  --cobalt-wash:   #F2F6FD;

  --ink:           #0D1019;     /* cool near-black, was warm */
  --ink-soft:      #2C3142;
  --ink-mute:      #6B7184;
  --ink-faint:     #B8BDCB;

  --snow:          #F8F8F4;     /* primary bg — cool, barely warm */
  --snow-deep:     #ECECE6;     /* hover bands */
  --paper:         #FFFFFF;     /* cards / fields */
  --stone:         #DDDDD4;     /* image placeholders */
  --line:          #D7D7CE;
  --hairline:      #E6E6DD;

  --moss:          #4E6A3D;
  --rust:          #B85A1C;
  --amber:         #D89C2E;
  --error:         #8A2A1F;

  --vault-bg:      #07080D;
  --vault-line:    #1A1D27;
  --vault-ink:     #E8EFFB;
  --vault-mute:    #5E6378;
  --vault-foil:    linear-gradient(135deg, #C99655 0%, #F5DC95 38%, #B58432 62%, #5E3F12 100%);

  /* ---------- Type: ONE family ---------- */
  --font-sans:     "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-mega:        clamp(96px, 14vw, 220px);
  --t-display:     clamp(56px, 8vw, 112px);
  --t-h1:          clamp(40px, 5vw, 72px);
  --t-h2:          clamp(28px, 3.2vw, 44px);
  --t-h3:          22px;
  --t-body-l:      18px;
  --t-body:        15.5px;
  --t-body-s:      13px;
  --t-mono:        12px;
  --t-mono-s:      10.5px;
  --t-eyebrow:     11px;

  --lh-display:    0.94;
  --lh-tight:      1.08;
  --lh-body:       1.5;

  --tracked-eye:   0.12em;

  /* ---------- Spacing ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  --rule:          1.5px solid var(--ink);
  --rule-thin:     1px solid var(--line);
  --rule-brand:    2px solid var(--cobalt);

  --ease:          cubic-bezier(0.2, 0.6, 0.2, 1);
  --d-fast:        140ms;
  --d-med:         240ms;

  --content-w:     1480px;
  --gutter:        clamp(20px, 4vw, 56px);
  /* V-08b: den faktiske tekstbredde. --content-w er BAANDETS cap inklusive
     gutter (.wrap, .sec, .shell, .nav__row lægger gutteren INDEN I den).
     Et fuldbredde farvebaand kan ikke det: baggrunden skal naa kanten, saa
     gutteren sidder paa det ydre element og cappet paa det indre. Det indre
     skal derfor cappe paa maalet UDEN gutter, ellers bliver baandet 2x56 px
     bredere end alt over og under det. Ét navn, saa de fem baand ikke driver
     fra hinanden igen. */
  --content-inner: calc(var(--content-w) - var(--gutter) * 2);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-med: 0ms; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--snow);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: 0; cursor: pointer; }
::selection { background: var(--cobalt); color: var(--snow); }

.wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }

/* Eyebrow — now in sans, not mono. The single move that kills the typewriter feel. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracked-eye);
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--cobalt); }
.eyebrow--paper { color: rgba(248,248,244,0.65); }
.eyebrow--paper::before { background: rgba(248,248,244,0.65); }
.eyebrow--cobalt::before { background: var(--cobalt-soft); }

/* Mono ONLY for SKUs, prices, GSM/cm/m values, quantity nums */
.mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1;
  background: var(--ink); color: var(--snow);
  border: 1.5px solid var(--ink); border-radius: var(--r-1);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--cobalt); border-color: var(--cobalt); }
.btn--brand { background: var(--cobalt); border-color: var(--cobalt); }
.btn--brand:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--snow); }
.btn--on-cobalt { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.btn--on-cobalt:hover { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--snow); border-color: rgba(248,248,244,0.5); }
.btn--ghost-light:hover { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.btn--mini { height: 38px; padding: 0 16px; font-size: 12.5px; }
.btn--big { height: 60px; padding: 0 32px; font-size: 15.5px; }
.btn--block { width: 100%; }

/* Hairline placeholder — cool gray, no orange stripe */
.ph {
  position: relative; display: block;
  background: var(--stone);
  background-image:
    linear-gradient(135deg, rgba(13,16,25,0.03) 0%, rgba(13,16,25,0.07) 100%),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(13,16,25,0.04) 16px 17px);
}
.ph__label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--font-sans); font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-mute); text-transform: uppercase;
  background: var(--snow); padding: 3px 8px;
  border-radius: var(--r-1);
}

.foil-text {
  background: var(--vault-foil);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot--moss { background: var(--moss); }
.dot--rust { background: var(--rust); }
.dot--mute { background: var(--ink-faint); }
.dot--cobalt { background: var(--cobalt); }