/* ============================================================================
   MAKKER — DESIGNSYSTEM · tokens & komponenter
   v1.0 · Juni 2026
   ----------------------------------------------------------------------------
   Industrielt og ærligt: koks + ét orange signal, kondenseret arbejdstøjs-
   typografi (Saira Condensed), neutral brødtekst (IBM Plex Sans) og spec-sheet-
   labels i mono (Space Mono). Fladt, stregbaseret — aldrig skygger eller gradient.

   Dækker alle flader: decks · web/landing · print (A4) · social.
   Importér denne fil og brug tokens + .mk-* klasser. Forks frem for genopfind.
   ============================================================================ */

/* Fonts (Google Fonts — hent lokalt for offline-brug) */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- Farver ---- */
  --ink:        #1c1c1e;   /* base flade, mørk register */
  --ink2:       #24221f;   /* paneler, kort på mørk */
  --ink3:       #312d28;   /* hævede flader, hover */
  --paper:      #f5f3ee;   /* lys register, tekst på mørk */
  --paper2:     #e9e5dc;   /* billed-slot, flader */
  --paper3:     #ddd8cc;   /* recessed paneler */
  --steel:      #8a857c;   /* dæmpet tekst, labels */
  --steel-2:    #9a948a;   /* dæmpet på mørk */
  --line:       #cec8ba;   /* streger på lys */
  --line-dark:  #3a3530;   /* streger på mørk */
  --accent:     #ff5b1f;   /* signal · kicker · accent — tweakable */
  --accent-deep:#e2461b;   /* hover / tryk */

  /* ---- Fonts ---- */
  --font-head: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'Courier New', monospace;

  /* ---- Type-skala · deck (@1920, skalér via --s) ---- */
  --s: 1;
  --type-display:  calc(134px * var(--s));
  --type-stat:     calc(112px * var(--s));
  --type-title:    calc(72px  * var(--s));
  --type-subtitle: calc(44px  * var(--s));
  --type-lead:     calc(36px  * var(--s));
  --type-body:     calc(31px  * var(--s));
  --type-small:    calc(24px  * var(--s));
  --type-kicker:   calc(24px  * var(--s));

  /* ---- Type-skala · web (responsiv) ---- */
  --w-display:  clamp(48px, 6.2vw, 92px);
  --w-title:    clamp(30px, 3.6vw, 46px);
  --w-subtitle: clamp(22px, 2.4vw, 30px);
  --w-lead:     clamp(18px, 1.4vw, 22px);
  --w-body:     17px;
  --w-small:    13.5px;
  --w-kicker:   12px;

  /* ---- Spacing (8px base) ---- */
  --gap-item:   26px;
  --gap-title:  40px;
  --pad-bottom: 84px;
  --pad-top:    94px;
  --pad-x:      112px;
  --section:    130px;

  /* ---- Form ---- */
  --r-photo: 4px;
  --r-card:  6px;
  --r-pill:  999px;
  --bw:      2px;          /* standard stregtykkelse */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
}

*{ box-sizing:border-box; }

/* ============================================================================
   REGISTRE — to flader, samme system
   ============================================================================ */
.mk-dark{  background:var(--ink);   color:var(--paper); }
.mk-light{ background:var(--paper); color:var(--ink);  }

body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:var(--ink); }

/* ============================================================================
   TYPOGRAFI
   ============================================================================ */
.mk-kicker{
  font-family:var(--font-mono); font-weight:400;
  font-size:var(--w-kicker); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:13px; margin:0;
}
.mk-kicker .num{ color:inherit; }

.mk-display{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  font-size:var(--w-display); line-height:0.9; letter-spacing:-0.01em;
  margin:0; text-wrap:balance;
}
.mk-title{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:var(--w-title); line-height:0.98; letter-spacing:-0.005em;
  margin:0; text-wrap:balance;
}
.mk-subtitle{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:var(--w-subtitle); line-height:1.02; margin:0;
}
.mk-lead{
  font-family:var(--font-body); font-weight:400;
  font-size:var(--w-lead); line-height:1.4; margin:0; text-wrap:pretty;
}
.mk-body{ font-size:var(--w-body); line-height:1.55; margin:0; text-wrap:pretty; }
.mk-small{ font-size:var(--w-small); line-height:1.45; margin:0; }
.mk-mono{ font-family:var(--font-mono); font-size:var(--w-small); letter-spacing:0.02em; }
.mk-accent{ color:var(--accent); }
.mk-muted{ color:var(--steel); }
.mk-dark .mk-muted{ color:var(--steel-2); }
.mk-stat{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--type-stat); line-height:0.85; letter-spacing:-0.01em;
  color:var(--accent);
}
.mk-stat-label{
  font-family:var(--font-mono); font-size:var(--w-small);
  letter-spacing:0.04em; text-transform:uppercase; color:var(--steel); line-height:1.3;
}

/* ---- Logo ---- */
.mk-logo{
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  letter-spacing:0.02em; line-height:1; display:inline-flex; align-items:baseline;
}
.mk-logo .dot{ color:var(--accent); }

/* ============================================================================
   KOMPONENTER
   ============================================================================ */

/* ---- Knapper ---- */
.mk-btn{
  font-family:var(--font-head); font-weight:700; font-size:18px;
  text-transform:uppercase; letter-spacing:0.02em; white-space:nowrap;
  border:var(--bw) solid transparent; border-radius:var(--r-card);
  padding:13px 26px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mk-btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.mk-btn--primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-1px); }
.mk-dark  .mk-btn--ghost{ background:transparent; border-color:var(--line-dark); color:var(--paper); }
.mk-light .mk-btn--ghost{ background:transparent; border-color:var(--line);      color:var(--ink);   }
.mk-btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
/* invers primær på lys flade */
.mk-light .mk-btn--ink{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.mk-light .mk-btn--ink:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.mk-btn--text{ background:none; border:0; padding:13px 4px; color:var(--steel); font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; }
.mk-btn--text:hover{ color:var(--paper); }

/* ---- Tags / pills ---- */
.mk-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  padding:8px 16px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-dark); color:var(--paper);
}
.mk-light .mk-tag{ border-color:var(--line); color:var(--ink); }
.mk-tag--solid{ background:var(--accent); border-color:var(--accent); color:var(--ink); font-weight:700; }

/* ---- Kort ---- */
.mk-card{
  border:var(--bw) solid var(--line-dark); border-radius:var(--r-card);
  padding:30px 28px; background:var(--ink2);
  transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
             background var(--t-base) var(--ease);
}
.mk-card:hover{ transform:translateY(-4px); border-color:var(--accent); background:var(--ink3); }
.mk-light .mk-card{ border-color:var(--line); background:var(--paper); }
.mk-light .mk-card:hover{ background:#fff; }

/* ---- Ikon-chip ---- */
.mk-ico-chip{
  width:84px; height:84px; flex:none;
  border:var(--bw) solid var(--line-dark); border-radius:var(--r-card);
  display:flex; align-items:center; justify-content:center;
}
.mk-light .mk-ico-chip{ border-color:var(--line); }
.mk-ico{ width:38px; height:38px; fill:none; stroke:var(--accent);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Streg ---- */
.mk-rule{ height:var(--bw); background:var(--line-dark); border:0; width:100%; }
.mk-light .mk-rule{ background:var(--line); }

/* ============================================================================
   LIVE-PRIK — den eneste loop-animation
   ============================================================================ */
.mk-dot{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--steel); display:inline-block; }
.mk-dot--live{ background:var(--accent); animation:mk-pulse 1.8s infinite; }
@keyframes mk-pulse{
  0%  { box-shadow:0 0 0 0 rgba(255,91,31,0.5); }
  70% { box-shadow:0 0 0 9px rgba(255,91,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,91,31,0); }
}
@media (prefers-reduced-motion: reduce){
  .mk-dot--live{ animation:none; }
  .mk-card, .mk-btn{ transition:none; }
}

/* ============================================================================
   BILLEDER — to behandlinger
   ============================================================================ */
.mk-img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--r-photo); }
.mk-img--raw{ filter:none; }                                  /* fuld farve · kundevendt */
.mk-duotone{ position:relative; border-radius:var(--r-photo); overflow:hidden; background:var(--ink); }
.mk-duotone img{ filter:grayscale(1) contrast(1.08) brightness(0.92); }
.mk-duotone::after{ content:''; position:absolute; inset:0; background:var(--accent); mix-blend-mode:color; opacity:0.6; }

/* ============================================================================
   PRINT — A4 en-sider, fakturaer, case studies
   ============================================================================ */
@page{ size:A4; margin:18mm 16mm; }
@media print{
  :root{ --w-body:11pt; }
  body{ background:#fff; color:var(--ink); }
  .mk-no-print{ display:none !important; }
  .mk-card{ box-shadow:none; }
}