/* ==========================================================================
   Fibonacci AS — designtokens
   Versjon 0.1 · 14.08.2026 · utkast til review
   Ren CSS, ingen avhengigheter. Importeres først i alle sider.
   ========================================================================== */

:root{

  /* --- Grunnfarger -------------------------------------------------------
     Marineblå bygget rundt logoens gull. Verdiene er kontrastmålt mot
     --bg; se kommentarer. Ikke legg til nye blåtoner utenfor denne skalaen. */
  --navy-950:#050C15;
  --navy-900:#08131F;   /* sidebakgrunn */
  --navy-800:#0C1B2B;   /* kort, flater */
  --navy-700:#12293F;   /* hevet flate, hover */
  --navy-600:#1B3A56;   /* kantlinje sterk */
  --navy-500:#27506F;   /* kun dekor */

  --gold-700:#8A6D12;
  --gold-600:#A8851B;
  --gold-500:#C9A227;   /* primær aksent — 7,73:1 mot --bg (AAA) */
  --gold-400:#DDB84A;
  --gold-300:#E8C766;   /* lenker og tall på mørk flate — 11,39:1 (AAA) */
  --gold-200:#F0DA9B;

  --ink-0:#F2F6FA;      /* 17,22:1 — display */
  --ink-1:#EDF1F6;      /* 16,48:1 — overskrift og primærtekst */
  --ink-2:#A6B6C6;      /*  9,02:1 — brødtekst */
  --ink-3:#7B8EA1;      /*  5,54:1 — sekundær, minste tillatte for løpende tekst */
  --ink-4:#65798D;      /*  4,16:1 — KUN ≥19px eller ikke-kritisk meta */
  /* Ikke bruk lysstyrker under --ink-4 til tekst. */

  /* --- Semantiske tokens — bruk disse, ikke råfargene ------------------- */
  --bg:var(--navy-900);
  --bg-raised:var(--navy-800);
  --bg-hover:var(--navy-700);

  --text:var(--ink-1);
  --text-body:var(--ink-2);
  --text-soft:var(--ink-3);
  --text-meta:var(--ink-4);

  --accent:var(--gold-500);
  --accent-bright:var(--gold-300);
  --accent-deep:var(--gold-700);

  --line:rgba(255,255,255,.07);      /* standard skillelinje */
  --line-strong:rgba(255,255,255,.13);
  --line-gold:rgba(201,162,39,.28);

  --focus:var(--gold-300);

  /* --- Typografi ---------------------------------------------------------
     Skalasteg = √φ ≈ 1,272. Gir en φ-forankret skala som er fin nok til
     brødtekst. Alle display-størrelser er clampet for skjermbredde. */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-num:var(--font);

  --t-overline:10.5px;
  --t-caption:13.4px;
  --t-body:17px;
  --t-lede:clamp(18px,1.4vw,21.6px);
  --t-h3:clamp(20px,1.8vw,27.5px);
  --t-h2:clamp(30px,4vw,44.5px);
  --t-h1:clamp(38px,6vw,72px);
  --t-display:clamp(44px,8vw,92px);

  --lh-tight:1.08;
  --lh-head:1.18;
  --lh-body:1.68;

  --ls-display:-.025em;
  --ls-head:-.015em;
  --ls-body:0;
  --ls-overline:.3em;    /* signatur fra logoens ordmerke */
  --ls-nav:.14em;

  --w-light:300;         /* alle overskrifter */
  --w-regular:400;
  --w-medium:500;        /* eyebrow, nav, etiketter */

  /* --- Rom — Fibonacci × 4 ---------------------------------------------- */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:20px;
  --s-5:32px;
  --s-6:52px;
  --s-7:84px;
  --s-8:136px;
  --s-9:220px;

  --section-y:clamp(84px,10vw,136px);

  /* --- Layout ------------------------------------------------------------ */
  --phi:1.618;
  /* Samme forhold som kolonnebredde. Egen token fordi `fr` er en <flex>-verdi
     og ikke kan regnes ut i calc() — `calc(1fr * var(--phi))` er ugyldig CSS,
     hele deklarasjonen forkastes, og rutenettet faller til én kolonne.
     Custom properties settes inn før parsing, så dette er gyldig.
     Endres --phi, må denne endres i takt. */
  --phi-col:1.618fr;
  --max:1180px;
  --gutter:clamp(24px,4vw,40px);

  /* --- Bevegelse ---------------------------------------------------------
     Sparsomt. Ingenting animeres uten grunn; siden skal kunne presenteres
     og hoppes rundt i uten å vente. */
  --dur-fast:140ms;
  --dur:220ms;
  --dur-slow:420ms;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Presentasjonsmodus — settes på <html data-stage>, se assets/stage.js.
   @media screen er ikke pynt: html[data-stage] har spesifisitet (0,1,1) og
   slår utskriftsdraktens :root (0,1,0). Uten innpakningen ga «skriv ut mens
   møtevisning står på» 25 elementer under 3:1 på hvitt papir — verst 1,13:1 —
   og en underside uten adresse, fordi stage skjuler sidefoten. Én innpakning
   fjerner hele kollisjonsklassen. Runde 14C fra Claude Design. */
@media screen{
  html[data-stage]{
    /* typeskalaen, som før */
    --t-body:21px;
    --t-caption:16px;
    --t-overline:13px;
    --t-lede:clamp(22px,1.7vw,27px);
    --t-h3:clamp(24px,2.2vw,34px);
    --t-h2:clamp(38px,4.8vw,56px);
    --t-h1:clamp(48px,7vw,88px);
    /* kontrastgulvet: projisering vasker ut de mørkeste trinnene først.
       Hele teksthierarkiet løftes ett trinn — ink-4 forsvinner fra flaten,
       ink-3 består kun der ink-4 sto (meta), og løpende tekst går til ink-1
       (16,48:1). Fargene er palettens egne; bare trinnvalget endres. */
    --text-body:var(--ink-1);
    --text-soft:var(--ink-2);
    --text-meta:var(--ink-3);
  }
  /* Målformen er tegn per linje, ikke fysisk bredde. 62ch på løftet type gir
     LENGRE blikkflytt per linje — dekk-mål er 45/38 tegn. ch beholdes som
     enhet (den skalerer riktig), antallet senkes. */
  html[data-stage] p{max-width:45ch}
  html[data-stage] .lede{max-width:38ch}
}

/* --- Grunnstiler --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:var(--w-light);line-height:var(--lh-head);margin:0}
h1{font-size:var(--t-h1);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
h2{font-size:var(--t-h2);letter-spacing:var(--ls-head)}
h3{font-size:var(--t-h3);font-weight:var(--w-medium);letter-spacing:0}
p{margin:0;color:var(--text-body);max-width:62ch}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* --- Byggeklosser -------------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.overline{font-size:var(--t-overline);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--accent);font-weight:var(--w-medium)}

.lede{font-size:var(--t-lede);color:var(--text-body);max-width:52ch}

/* φ-delt seksjonshode: smal etikettkolonne, bred innholdskolonne */
.phi-grid{display:grid;grid-template-columns:1fr var(--phi-col);
  gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:900px){.phi-grid{grid-template-columns:1fr;gap:var(--s-4)}}

.rule{height:1px;background:linear-gradient(90deg,var(--accent),transparent);border:0;margin:var(--s-5) 0}

.section{padding-block:var(--section-y);border-top:1px solid var(--line)}

/* Faktarute — spesifikasjonsmønsteret. Aldri færre enn tre, aldri flere enn fire. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong)}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.facts{grid-template-columns:1fr}}
.fact{padding:var(--s-5) var(--s-5) var(--s-5) 0;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact-v{font-size:var(--t-h3);font-weight:var(--w-light);color:var(--text);letter-spacing:var(--ls-head)}
.fact-k{font-size:var(--t-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;
  color:var(--accent);margin-top:var(--s-3)}
.fact-d{font-size:var(--t-caption);color:var(--text-soft);margin-top:var(--s-3);line-height:1.55}

/* Statusmerke — prosjektet er i tidligfase og det skal stå tydelig */
.badge{display:inline-flex;align-items:center;gap:var(--s-2);
  border:1px solid var(--line-gold);border-radius:999px;padding:5px 14px;
  font-size:var(--t-overline);letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--accent-bright)}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* En brukket pille er ikke en pille: på de smaleste flatene strammes satsen
   i stedet for å la merket gå over to linjer (målt: brakk på 320). */
@media(max-width:360px){.badge{font-size:9.5px;letter-spacing:.08em;white-space:nowrap}}

/* Handling */
.btn{display:inline-flex;align-items:center;gap:var(--s-3);
  border:1px solid var(--accent);color:var(--accent-bright);background:none;cursor:pointer;
  padding:13px 26px;font:inherit;font-size:var(--t-caption);letter-spacing:var(--ls-nav);
  text-transform:uppercase;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--accent);color:var(--navy-900)}
.btn-quiet{border:0;border-bottom:1px solid var(--accent);padding:0 0 6px;color:var(--accent-bright)}
.btn-quiet:hover{background:none;color:var(--gold-200);border-color:var(--gold-200)}

/* Radliste for forretningsområder */
.row{display:grid;grid-template-columns:1fr var(--phi-col);
  gap:clamp(28px,5vw,64px);padding-block:var(--s-5);border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
/* 9b: stablegapet på mobil er 20–28 px — --s-2 (8 px) klemte etiketten inn i innholdet. */
@media(max-width:900px){.row{grid-template-columns:1fr;gap:var(--s-4)}}