/* ============================================================
   Multum Columen — designtokens
   Slipp denne inn i prosjektet og bygg mot variablene.
   Overflatesystemet følger mønsteret fra referansen; aksenten er vår egen.
   ============================================================ */

:root {
  /* --- Overflater, mørk --- */
  --mc-bg:            #000024;   /* dypeste, sidetopp */
  --mc-bg-2:          #001848;   /* midtflate */
  --mc-bg-3:          #003060;   /* sidebunn */
  --mc-surface:       #002454;   /* seksjon */
  --mc-surface-2:     #003C6C;   /* kort */
  --mc-surface-3:     #184884;   /* kort, hevet */
  --mc-border:        rgba(24,120,192,0.28);
  --mc-border-soft:   rgba(255,255,255,0.06);

  /* --- Overflater, lys (dokumenter og utskrift) --- */
  --mc-bg-light:      #FFFFFF;
  --mc-surface-light: #F3F7FA;
  --mc-border-light:  #D6DEE6;

  /* --- Indigo og lilla, hovedaksent på flater --- */
  --mc-blue:          #184884;   /* primær blå */
  --mc-blue-lt:       #0098D0;   /* lys blå */
  --mc-blue-dk:       #002454;   /* dyp blå */
  --mc-cyan:          #00B8E0;   /* signaturglød, bunnkant */
  --mc-cyan-lt:       #00C0E0;
  --mc-violet:        #3C0C78;   /* øvre glød */
  --mc-blue-bg:       #EAF2FA;

  /* --- Gull, primæraksent --- */
  --mc-gold:          #C8A848;   /* Crowd1-referansens eksakte gull */
  --mc-gold-lt:       #E8C060;
  --mc-gold-hi:       #F4E4A8;
  --mc-gold-dk:       #B89838;
  --mc-gold-deep:     #8A6E20;
  --mc-gold-bg:       #FCF6E7;

  /* --- Tekst --- */
  --mc-text:          #FFFFFF;
  --mc-text-2:        #C4D2E2;
  --mc-text-mute:     #8FA3BE;
  --mc-text-dim:      #4A6484;
  --mc-text-light:    #111A24;
  --mc-text-light-2:  #515C69;

  /* --- Status --- */
  --mc-ok:            #2E9E6B;
  --mc-ok-bg:         rgba(46,158,107,0.12);
  --mc-warn:          #D9A22B;
  --mc-warn-bg:       rgba(217,162,43,0.12);
  --mc-error:         #D14A5A;
  --mc-error-bg:      rgba(209,74,90,0.12);

  /* --- Rangfarger --- */
  --mc-rank-1:        #5A7290;   /* Associate */
  --mc-rank-2:        #00B8E0;   /* Senior Associate */
  --mc-rank-3:        #184884;   /* Manager */
  --mc-rank-4:        #B89838;   /* Director */
  --mc-rank-5:        #C8A848;   /* Executive Director */
  --mc-rank-6:        #E8C060;   /* Presidential Director */

  /* --- Gradienter --- */
  --mc-grad-page:  linear-gradient(178deg,#000018 0%,#000024 38%,#001848 76%,#003060 100%);
  --mc-grad-glow:  radial-gradient(70% 70% at 50% 20%, rgba(60,12,120,0.38), transparent);
  --mc-grad-warm:  radial-gradient(58% 58% at 86% 78%, rgba(0,152,208,0.26), transparent);
  --mc-grad-card:  linear-gradient(150deg, rgba(24,120,192,0.20), rgba(255,255,255,0.03));
  --mc-grad-accent: linear-gradient(135deg, var(--mc-violet), var(--mc-blue) 40%, var(--mc-cyan));
  --mc-grad-band:  linear-gradient(180deg, rgba(0,184,224,0), rgba(0,184,224,0.20));
  --mc-grad-gold:  linear-gradient(135deg, var(--mc-gold-hi), var(--mc-gold-lt) 38%, var(--mc-gold) 72%, var(--mc-gold-deep));
  --mc-grad-gold-txt: linear-gradient(140deg, var(--mc-gold-hi), var(--mc-gold-lt) 45%, var(--mc-gold));
  --mc-grad-gold-card: linear-gradient(150deg, rgba(200,168,72,0.16), rgba(200,168,72,0.035));
  --mc-grad-rule:  linear-gradient(90deg, transparent, var(--mc-gold) 16%, var(--mc-gold) 84%, transparent);
  --mc-grad-foot:  linear-gradient(90deg, var(--mc-violet), var(--mc-blue) 24%, var(--mc-cyan) 52%, var(--mc-gold) 78%, var(--mc-gold-lt));

  /* --- Typografi --- */
  --mc-font:      'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mc-font-mono: 'IBM Plex Mono',ui-monospace,monospace;

  --mc-fs-display: 104px;
  --mc-fs-h1:       64px;
  --mc-fs-h2:       40px;
  --mc-fs-h3:       28px;
  --mc-fs-lead:     22px;
  --mc-fs-body:     17px;
  --mc-fs-small:    15px;
  --mc-fs-label:    13px;
  --mc-fs-stat:     88px;

  --mc-ls-label:  0.34em;
  --mc-ls-tight: -0.01em;

  /* --- Rom --- */
  --mc-sp-1: 4px;  --mc-sp-2: 8px;  --mc-sp-3: 12px; --mc-sp-4: 16px;
  --mc-sp-5: 24px; --mc-sp-6: 32px; --mc-sp-7: 48px; --mc-sp-8: 64px;
  --mc-sp-9: 96px;

  --mc-radius:    18px;
  --mc-radius-sm: 12px;
  --mc-radius-pill: 999px;

  --mc-maxw: 1280px;
  --mc-gutter: 32px;

  /* --- Bevegelse --- */
  --mc-ease:      cubic-bezier(0.22,0.61,0.36,1);
  --mc-dur-fast:  160ms;
  --mc-dur:       280ms;
  --mc-dur-slow:  520ms;

  /* --- Skygge --- */
  --mc-shadow:     0 8px 28px rgba(0,0,0,0.34);
  --mc-shadow-lg:  0 18px 56px rgba(0,0,0,0.44);
}

/* ============================================================
   Komponenter
   ============================================================ */

.mc-page { background: var(--mc-grad-page); color: var(--mc-text); font-family: var(--mc-font); }
.mc-page::before { content:""; position:fixed; inset:0; background: var(--mc-grad-glow), var(--mc-grad-warm); pointer-events:none; }

.mc-container { max-width: var(--mc-maxw); margin: 0 auto; padding: 0 var(--mc-gutter); }

.mc-card {
  background: var(--mc-grad-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  backdrop-filter: blur(14px);
  padding: var(--mc-sp-6);
  transition: transform var(--mc-dur) var(--mc-ease), border-color var(--mc-dur) var(--mc-ease);
}
.mc-card:hover { transform: translateY(-2px); border-color: rgba(200,168,72,0.42); }

.mc-card--gold {
  background: var(--mc-grad-gold-card);
  border-color: rgba(200,168,72,0.42);
}
.mc-card--gold:hover { border-color: rgba(200,168,72,0.68); }

.mc-heading--gold {
  background: var(--mc-grad-gold-txt);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.mc-kicker {
  font-size: var(--mc-fs-label); font-weight: 600;
  letter-spacing: var(--mc-ls-label); color: var(--mc-gold);
  text-transform: uppercase;
}
.mc-kicker::before { content:""; display:block; width:72px; height:2.6px; background: var(--mc-gold); margin-bottom: var(--mc-sp-3); }

.mc-rule { height: 2.6px; background: var(--mc-grad-rule); border: 0; }

.mc-stat__value { font-size: var(--mc-fs-stat); font-weight: 600; letter-spacing: var(--mc-ls-tight); }
.mc-stat__label { font-size: var(--mc-fs-label); color: var(--mc-text-mute); letter-spacing: 0.1em; }
.mc-stat__value + .mc-stat__label { margin-top: var(--mc-sp-3); }

/* Sekskantet rangmerke */
.mc-rank-badge {
  width: 56px; height: 62px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: grid; place-items: center;
  font-weight: 600; color: #FFFFFF;
}
.mc-rank-badge[data-rank="1"] { background: var(--mc-rank-1); }
.mc-rank-badge[data-rank="2"] { background: var(--mc-rank-2); }
.mc-rank-badge[data-rank="3"] { background: var(--mc-rank-3); }
.mc-rank-badge[data-rank="4"] { background: var(--mc-rank-4); }
.mc-rank-badge[data-rank="5"] { background: var(--mc-rank-5); color: var(--mc-text-light); }
.mc-rank-badge[data-rank="6"] { background: var(--mc-rank-6); color: var(--mc-text-light); }

.mc-pill {
  display: inline-flex; align-items: center; gap: var(--mc-sp-2);
  padding: 6px 14px; border-radius: var(--mc-radius-pill);
  font-size: var(--mc-fs-label); font-weight: 600;
}
.mc-pill--ok    { background: var(--mc-ok-bg);    color: var(--mc-ok); }
.mc-pill--warn  { background: var(--mc-warn-bg);  color: var(--mc-warn); }
.mc-pill--error { background: var(--mc-error-bg); color: var(--mc-error); }

/* Overstyrt verdi — alltid synlig for distributøren */
.mc-override { color: var(--mc-gold); font-weight: 600; }
.mc-override::after { content:"ⓘ"; margin-left: 6px; font-size: 0.8em; cursor: help; }

.mc-table { width: 100%; border-collapse: collapse; }
.mc-table thead th {
  background: var(--mc-blue-dk); color: var(--mc-gold-lt);
  font-size: var(--mc-fs-label); font-weight: 600;
  text-align: left; padding: var(--mc-sp-4);
  border-bottom: 3px solid var(--mc-gold);
}
.mc-table tbody td { padding: var(--mc-sp-4); border-bottom: 1px solid var(--mc-border-soft); }
.mc-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.mc-table tbody tr.is-highlight { background: rgba(199,162,75,0.08); }

.mc-callout { border-left: 8px solid; border-radius: var(--mc-radius-sm); padding: var(--mc-sp-5); }
.mc-callout--gold  { border-color: var(--mc-gold);    background: rgba(199,162,75,0.07); }
.mc-callout--blue  { border-color: var(--mc-cyan); background: rgba(0,184,224,0.10); }
.mc-callout--ok    { border-color: var(--mc-ok);      background: var(--mc-ok-bg); }
.mc-callout--warn  { border-color: var(--mc-error);   background: var(--mc-error-bg); }

.mc-progress { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mc-progress__fill { height: 100%; background: var(--mc-grad-gold); transition: width var(--mc-dur-slow) var(--mc-ease); }

.mc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--mc-radius-pill);
  font-weight: 600; font-size: var(--mc-fs-body); cursor: pointer;
  transition: all var(--mc-dur) var(--mc-ease); border: 1px solid transparent;
}
.mc-btn--primary { background: var(--mc-grad-gold); color: var(--mc-text-light); }
.mc-btn--accent  { background: var(--mc-grad-accent); color: #FFFFFF; }

/* Signaturbånd nederst på hver seksjon, som i referansen */
.mc-band { position: relative; }
.mc-band::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:46px;
  background: var(--mc-grad-band); pointer-events:none;
}
.mc-band::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background: var(--mc-grad-foot); z-index:1;
}
.mc-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mc-btn--ghost { background: transparent; border-color: rgba(199,162,75,0.5); color: var(--mc-gold); }
.mc-btn--ghost:hover { background: rgba(199,162,75,0.10); }

/* ============================================================
   Brytepunkter
   ============================================================ */
@media (max-width: 1280px) { :root { --mc-fs-display: 76px; --mc-fs-h1: 48px; --mc-fs-stat: 64px; } }
@media (max-width: 900px)  { :root { --mc-fs-display: 56px; --mc-fs-h1: 38px; --mc-fs-h2: 30px; --mc-fs-stat: 48px; --mc-gutter: 24px; } }
@media (max-width: 640px)  { :root { --mc-fs-display: 40px; --mc-fs-h1: 30px; --mc-fs-h2: 25px; --mc-fs-stat: 40px; --mc-gutter: 16px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}