/*
 * W-TEK designprofil for AnbudRadar.
 *
 * Kilder: Fargepalett-W-tek.pdf og Kubeform-*.pdf. Tre farger og én grunnform.
 *
 *   Dyp Grønn  #1D3C34   C:82 M:52 Y:69 K:55
 *   Besh       #FFEEE0   C:0  M:6  Y:10 K:0
 *   Oransj     #E46700   C:7  M:72 Y:100 K:0
 *
 * Typografi: Inter (samme som profildokumentene). Filene ligger i public/fonts
 * og lastes lokalt — ingen Google Fonts, ingen tredjeparts-CDN. Det er både et
 * personvernvalg og en driftsgaranti: appen skal se riktig ut uten utgående
 * nett.
 *
 * Filen er delt i to lag:
 *   1) MERKEVARELAGET — palettens farger, uendret, med navnene fra profilen.
 *   2) SEMANTISK LAG  — det resten av grensesnittet faktisk bruker
 *                       (--bg, --text, --accent …). Skal profilen justeres,
 *                       er det bare lag 1 som røres.
 */

/* ===== Inter ============================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ===== 1) Merkevarelaget ================================================== */

:root {
  /* Palettens tre farger, uendret. */
  --wt-green: #1d3c34;
  --wt-besh: #ffeee0;
  --wt-orange: #e46700;

  /* Avledninger. Samme kulør, justert lyshet — ingen nye farger innført. */
  --wt-green-800: #16302a;
  --wt-green-900: #101f1c;
  --wt-green-mid: #14684f; /* lysere søsken til Dyp Grønn, brukt som statusgrønn */
  --wt-besh-soft: #fff7f1;
  --wt-besh-line: #ead9c9;

  /*
   * Oransj passerer ikke WCAG AA mot hvitt for vanlig tekst (3,4:1 — kravet er
   * 4,5:1). Profilfargen brukes derfor til flater, grafikk og fokusringer, der
   * kravet er 3:1, mens en mørkere søsken bærer tekst. Bruk --wt-orange-ink
   * til alt som har bokstaver på seg.
   */
  --wt-orange-ink: #c25500;   /* 4,6:1 mot hvitt */
  --wt-orange-deep: #a34700;  /* hover */
  --wt-orange-light: #ff8a3d; /* leselig oransj på mørk bakgrunn */
  --wt-orange-wash: #fdece0;

  /* Kubeform — merkevarens sammensatte grunnform, som maske. */
  --kubeform-2x3: url("img/kubeform-2x3.svg");
  --kubeform-3x2: url("img/kubeform-3x2.svg");
  --kubeform-3x3: url("img/kubeform-3x3.svg");
}

/* ===== 2) Semantisk lag — lys ============================================= */

:root {
  --bg: var(--wt-besh);
  --surface: #ffffff;
  --surface-2: var(--wt-besh-soft);
  --text: var(--wt-green);
  --muted: #556b63; /* 5,1:1 mot Besh */
  --border: var(--wt-besh-line);
  --border-strong: #d9c6b4;

  --accent: var(--wt-orange-ink);
  --accent-hover: var(--wt-orange-deep);
  --accent-bright: var(--wt-orange); /* flater, fokus, grafikk — aldri liten tekst */
  --accent-wash: var(--wt-orange-wash);
  --on-accent: #ffffff;

  /* Toppseksjon: dyp grønn ramme rundt innholdet. */
  --header-bg: var(--wt-green);
  --header-text: var(--wt-besh);
  --header-muted: #9db3aa;
  --header-hover: rgba(255, 238, 224, 0.1);
  --header-border: var(--wt-green-800);

  /*
   * Statusfarger. Dyp Grønn er så mørk at den fungerer som blekk, ikke som
   * «en grønn» — derfor kolliderer den ikke med den grønne relevans-merkelappen.
   * Alle fire er valgt i palettens varme/grønne familie, men holdt tydelig fra
   * hverandre i både kulør og lyshet, slik at de er til å skille også for den
   * som ser farger annerledes.
   */
  --green: var(--wt-green-mid);
  --green-bg: #e6f1ec;
  --amber: #8a5200;
  --amber-bg: #fbeed8;
  --red: #b32218;
  --red-bg: #fce9e6;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(29, 60, 52, 0.06);
  --shadow: 0 1px 3px rgba(29, 60, 52, 0.07), 0 6px 18px rgba(29, 60, 52, 0.05);
  --shadow-lg: 0 12px 40px rgba(29, 60, 52, 0.16);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ===== 2) Semantisk lag — mørk ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--wt-green-900);
    --surface: #172c27;
    --surface-2: #1e3630;
    --text: #f2e6dc; /* dempet Besh — full Besh gnistrer på mørk flate */
    --muted: #9bafa6; /* 7,3:1 mot bakgrunnen */
    --border: #2a3f39;
    --border-strong: #3a534b;

    --accent: var(--wt-orange-light);
    --accent-hover: #ffa05f;
    --accent-bright: var(--wt-orange);
    --accent-wash: #33221a;
    --on-accent: var(--wt-green-900);

    /* Profilens grønn, ikke en mørkere variant: i mørk drakt må rammen løftes
       fra siden bak, ellers forsvinner topplinjen i bakgrunnen. */
    --header-bg: var(--wt-green);
    --header-text: #f2e6dc;
    --header-muted: #9bafa6;
    --header-hover: rgba(255, 238, 224, 0.08);
    --header-border: #24403a;

    /* Bakgrunnene er trukket tydeligere bort fra --surface (#172c27), ellers
       forsvinner merkelappen inn i kortet den ligger på. */
    --green: #5fc39b;
    --green-bg: #0e3527;
    --amber: #e8b871;
    --amber-bg: #38280d;
    --red: #f09189;
    --red-bg: #43201c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.5);
  }
}

/* ===== Logo =============================================================== */

.wtek-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--header-text);
}
.wtek-logo .kube {
  width: 30px;
  height: 33px;
  flex: 0 0 auto;
}
.wtek-logo .name {
  font-size: 1.06rem;
  white-space: nowrap;
}
.wtek-logo .name b {
  font-weight: 700;
}
.wtek-logo .name span {
  font-weight: 400;
  opacity: 0.78;
}

/* ===== Kubeform som dekor ================================================= */

/*
 * Maske framfor <img>, så formen arver farge fra konteksten og virker i både
 * lys og mørk drakt uten to filsett.
 */
.kubeform {
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.kubeform-2x3 { -webkit-mask-image: var(--kubeform-2x3); mask-image: var(--kubeform-2x3); aspect-ratio: 168 / 111; }
.kubeform-3x2 { -webkit-mask-image: var(--kubeform-3x2); mask-image: var(--kubeform-3x2); aspect-ratio: 168 / 111; }
.kubeform-3x3 { -webkit-mask-image: var(--kubeform-3x3); mask-image: var(--kubeform-3x3); aspect-ratio: 196 / 111; }