/* ============================================================
   Mola Invest - designtokens
   Ét sted for farve, flade, radius, spacing og typeskala.
   Sidernes lokale blokke (.mi, .fo, .inv, .om, .pr, ...) peger
   ind i disse tokens, så en ændring her slår igennem overalt.
   ============================================================ */

:root{
  /* --- Flader ------------------------------------------------ */
  --bg:            #0e0e0e;   /* side */
  --bg-raised:     #121212;   /* båndsektioner, striber */
  --bg-sunken:     #0a0a0a;   /* footer, dybeste lag */
  --surface:       rgba(255,255,255,.04);   /* kort */
  --surface-hi:    rgba(255,255,255,.07);   /* kort, hover */
  --surface-solid: #141414;                 /* kort med billede */
  --line:          rgba(255,255,255,.10);   /* 1px kanter */
  --line-strong:   rgba(255,255,255,.18);

  /* --- Accent: guld er handling, grøn er status -------------- */
  --accent:        #ffbd3a;
  --accent-deep:   #ef9f23;
  --accent-light:  #ffe1a0;
  --accent-ink:    #151515;                 /* tekst på guld */
  --accent-weak:   rgba(255,189,58,.14);
  --accent-edge:   rgba(255,189,58,.55);

  --success:       #8fd694;                 /* KUN exit/positiv status */
  --success-weak:  rgba(143,214,148,.14);

  /* --- Tekst: fire trin, ikke syv ---------------------------- */
  --text:          #f2f3f4;
  --text-2:        #c9ced5;
  --text-3:        #9aa1a9;
  --text-4:        #7b818a;

  /* --- Radius ------------------------------------------------ */
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* --- Spacing (4px-basis) ----------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;   --s-10:64px;   --s-11:80px;  --s-12:96px;

  /* --- Sektionsrytme ----------------------------------------- */
  --sec-y:      clamp(64px, 7vw, 96px);
  --sec-y-tight: clamp(48px, 5vw, 68px);

  /* --- Typeskala (ét sæt trin for hele sitet) ---------------- */
  --fs-display: clamp(40px, 5.2vw, 64px);
  --fs-h1:      clamp(34px, 4.4vw, 52px);
  --fs-h2:      clamp(28px, 3.4vw, 42px);
  --fs-h3:      20px;
  --fs-h4:      16px;
  --fs-lead:    clamp(17px, 1.4vw, 20px);
  --fs-body:    16px;
  --fs-sm:      15px;
  --fs-xs:      13px;
  --fs-eyebrow: 12px;

  --fs-stat-xl: clamp(56px, 8vw, 92px);
  --fs-stat:    clamp(38px, 4.6vw, 56px);
  --fs-stat-sm: clamp(30px, 3.4vw, 40px);

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.55;

  --track-display: -.025em;
  --track-head:    -.02em;
  --track-eyebrow: .14em;

  --shadow-lift: 0 30px 80px rgba(0,0,0,.5);

  /* --- Bagudkompatible aliaser (sidernes gamle navne) -------- */
  --ac:   var(--accent);
  --gr:   var(--success);
  --ln:   var(--line);
  --card: var(--surface);
}

/* ============================================================
   Ikonsystem - ét stregsæt, aldrig emoji
   Ikonet arver størrelse af forælderens font-size og farve af
   currentColor, så eksisterende .ic/.e-regler stadig styrer det.
   ============================================================ */
.ico{
  width:1em; height:1em;
  flex:none;
  display:inline-block;
  vertical-align:-.125em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.ico-accent{color:var(--accent);}

/* Ikon i overskrift: lidt mindre end teksten, optisk løftet */
h1 > .ico, h2 > .ico, h3 > .ico, h4 > .ico{
  width:.82em; height:.82em;
  margin-right:.42em;
  color:var(--accent);
  vertical-align:-.06em;
  stroke-width:1.7;
}

/* Ikon i chip/badge: følger teksten */
.ico-inline{
  width:1.02em; height:1.02em;
  margin-right:.42em;
  vertical-align:-.16em;
  stroke-width:1.8;
}

/* ============================================================
   Ensartet billedbehandling
   Portefolje- og investeringsbilleder kommer fra mange kilder i
   forskellig farvetemperatur. Et faelles lag samler dem visuelt,
   og hover giver billedet fuld maetning igen.
   ============================================================ */
.mi .mi-tile img,
.inv .inv-imgwrap img{
  filter:saturate(.88) contrast(1.05) brightness(.95);
  transition:transform .55s cubic-bezier(.2,.6,.2,1),
             filter .45s cubic-bezier(.2,.6,.2,1);
}
.mi .mi-tile:hover img,
.inv .inv-card:not(.inactive):hover .inv-imgwrap img{
  filter:saturate(1) contrast(1) brightness(1);
}

/* Portraetter: fast, ens behandling - ingen hover-skift */
.ko-team .ko-photo img,
.pr-gal img{
  filter:saturate(.9) contrast(1.03);
}

/* --- Ikonplacering i de eksisterende komponenter ------------- */
.mi-comp .ic,
.mi-foreitem .e,
.fo-topic .e,
.fo-role .e{color:var(--accent);line-height:1;}

/* Kortikoner: lidt stoerre og tyndere, saa de baerer overskriften */
.mi-comp .ic .ico,
.fo-topic .e .ico{width:1.18em;height:1.18em;stroke-width:1.4;}
.fo-role .e .ico{stroke-width:1.5;}

/* Ikon i punktliste: optisk paa linje med titlens x-hoejde */
.mi-foreitem .e .ico,
.fo-role .e .ico{vertical-align:0;margin-top:1px;}

/* I flex-forældre styrer gap afstanden, ikke ikonets margin */
.inv-badge .ico,
.mi-cred .ico,
.fo-role .ico,
.mi-foreitem .ico{margin-right:0;}

/* Fyldt ikon (stjerne i badge/chip) */
.ico-fill{fill:currentColor;stroke:none;}

/* Badges: grøn = exit, guld = fremhævet, grå = afsluttet */
.inv-badge.exit{background:var(--success);color:#0f3018;}
.inv-badge.feat{background:var(--accent);color:var(--accent-ink);}