/* ============================================================================
   NORDISKA BRAND — canonical design tokens (CSS)
   Source of truth: NordiskaBrand_visualguide_2023.pdf + BST-Calc "Instrument"
   design language (BstAddin/webui) + BST.extension branding.py
   ----------------------------------------------------------------------------
   RULE #1: the five brand variables below are the ONLY hand-set brand colors.
   Every other color role is DERIVED from them via color-mix().
   Never hardcode brand hexes inside components — always read var(--deep) etc.
   ========================================================================== */

:root {
  /* ---- 1. THE FIVE BRAND COLORS (exact 2023 visual guide values) -------- */
  --deep:  #05234F;  /* Djupet  — dark navy. Backgrounds, chrome, body text   */
  --wave:  #0075BF;  /* Vågen   — medium blue. Primary accent, labels, borders */
  --drop:  #0BBBEF;  /* Droppen — cyan. Highlights, accent seams, data accents */
  --steam: #F2F5F7;  /* Ångan   — off-white. Surfaces, text on dark           */
  --glow:  #FFA168;  /* Glöden  — orange. CTA ONLY. Use sparingly (10%)       */

  /* ---- 2. SECONDARY DIGITAL BLUES (symbol gradient / dataviz ramps only) - */
  --blue-ramp-1: #0080C9;
  --blue-ramp-2: #008BD2;
  --blue-ramp-3: #0095DB;
  --blue-ramp-4: #009FE3;
  --blue-ramp-5: #00A7E7;
  --blue-ramp-6: #00B1EB;

  /* ---- 3. DERIVED ROLES (Instrument system — do not hand-tune) ----------
     color-mix() requires Chrome/Edge 111+, Firefox 113+, Safari 16.2+.
     Each property carries a static fallback first for older engines.      */
  --ink:            #05214A;                                      /* body text */
  --ink:            color-mix(in srgb, var(--deep) 92%, #0b0f14);
  --muted:          #556884;  /* secondary text — AA on white (5.7:1) & surface-0 (5.1:1) */
  --muted:          color-mix(in srgb, var(--ink) 68%, var(--surface-1));
  --on-deep:        #F4FBFE;                                      /* text on navy */
  --on-deep:        color-mix(in srgb, #ffffff 92%, var(--drop));

  --surface-0:      #EFF3F6;                                      /* app bg */
  --surface-0:      color-mix(in srgb, var(--steam) 96%, var(--deep));
  --surface-1:      #ffffff;                                      /* cards/panels */
  --surface-2:      #F0F3F6;                                      /* inputs */
  --surface-2:      color-mix(in srgb, var(--surface-1) 94%, var(--deep));
  --surface-sunken: #F0F2F7;                                      /* readout recess */
  --surface-sunken: color-mix(in srgb, var(--deep) 6%, #ffffff);

  --line:           rgba(5, 35, 79, 0.14);                        /* hairlines */
  --line:           color-mix(in srgb, var(--deep) 14%, transparent);
  --line-strong:    rgba(5, 35, 79, 0.26);
  --line-strong:    color-mix(in srgb, var(--deep) 26%, transparent);

  --accent:         var(--wave);   /* interactive accent: focus, active, links */
  --accent-bright:  var(--drop);   /* accent seams, active indicators          */
  --cta-fill:       var(--glow);   /* the ONE primary call-to-action           */
  --cta-fg:         var(--deep);   /* Djupet text on Glöden (7.8:1). NEVER white (2.0:1) */

  /* ---- 4. STATUS (one shared set, company-wide) -------------------------- */
  --pass-bg:   #E8F5E9;  --pass-text: #2E7D32;
  --fail-bg:   #FFEBEE;  --fail-text: #C62828;
  --warn-bg:   #FFF4E0;  --warn-text: #B46E00;

  /* ---- 5. TYPOGRAPHY ------------------------------------------------------ */
  --body-font:  "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --title-font: "Miriam Libre", "Roboto", "Segoe UI", system-ui, sans-serif;
  --mono-font:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --fs-overline: 11px;   /* uppercase labels, letter-spacing .09em */
  --fs-small:    12px;
  --fs-body:     13px;
  --fs-title:    15px;   /* panel titles */
  --fs-readout:  20px;
  --fs-h2:       24px;
  --fs-hero:     32px;   /* hero metric / display */
  --lh-body:     1.35;
  --lh-num:      1.1;
  --ls-overline: 0.09em;

  /* ---- 6. SPACING (4px base) --------------------------------------------- */
  --s1: 2px;  --s2: 4px;  --s3: 6px;  --s4: 8px;
  --s5: 12px; --s6: 16px; --s7: 24px; --s8: 32px;

  /* ---- 7. SHAPE ----------------------------------------------------------- */
  --r1: 4px;    /* controls: buttons, inputs                  */
  --r2: 8px;    /* cards, dialogs                             */
  --r3: 12px;   /* large containers, hero cards, header tiles */
  --r-pill: 999px;
  --control-h: 28px;

  /* ---- 8. ELEVATION & MOTION ---------------------------------------------- */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow-2: 0 12px 40px color-mix(in srgb, var(--ink) 22%, transparent);
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-control: 120ms;
  --dur-panel: 180ms;
}

/* ============================================================================
   BASE
   ========================================================================== */
.nb-app {
  background: var(--surface-0);
  color: var(--ink);                 /* navy body text — a brand signature */
  font-family: var(--body-font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.nb-title {                          /* Miriam Libre: hero/display ONLY */
  font-family: var(--title-font);
  font-weight: 400;
  line-height: 1.0;
}

.nb-overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
}

.nb-num {                            /* EVERY numeric value — company signature */
  font-family: var(--mono-font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: var(--lh-num);
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Buttons ---- */
.nb-btn {
  height: var(--control-h);
  padding: 0 var(--s5);
  border-radius: var(--r1);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 var(--fs-body) var(--body-font);
  cursor: pointer;
  transition: background var(--dur-control) var(--ease),
              box-shadow var(--dur-control) var(--ease);
}
.nb-btn:hover  { background: color-mix(in srgb, var(--surface-2) 86%, var(--deep)); }
.nb-btn:active { transform: translateY(1px); }
.nb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-1),
              0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.nb-btn:disabled { opacity: .5; cursor: default; }

.nb-btn--cta {                        /* THE one main action — Glöden */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--cta-fill) 90%, #fff 10%), var(--cta-fill));
  border-color: color-mix(in srgb, var(--cta-fill) 70%, var(--deep));
  color: var(--cta-fg);
  font-weight: 700;
}
.nb-btn--cta:hover { background: color-mix(in srgb, var(--cta-fill) 88%, var(--deep)); }

.nb-btn--primary {                    /* standard primary action — Vågen */
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 80%, var(--deep));
  color: #fff;
  font-weight: 500;
}
.nb-btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--deep)); }

.nb-btn--ghost  { background: transparent; border-color: transparent; }
.nb-btn--ghost:hover { background: color-mix(in srgb, var(--deep) 7%, transparent); }

.nb-btn--danger { background: var(--fail-text); border-color: var(--fail-text); color: #fff; }

/* ---- Inputs ---- */
.nb-field {
  height: var(--control-h);
  padding: 0 var(--s4);
  border-radius: var(--r1);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 var(--fs-body) var(--body-font);
  transition: border-color var(--dur-control) var(--ease),
              box-shadow var(--dur-control) var(--ease);
}
.nb-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.nb-field[inputmode="decimal"], .nb-field--num {
  font-family: var(--mono-font);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.nb-field--invalid { border-color: var(--fail-text); }

/* ---- Cards & panels ---- */
.nb-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow-1);
  padding: var(--s6);
}
.nb-card--hero { border-radius: var(--r3); }
.nb-card--sunken { background: var(--surface-sunken); box-shadow: none; }

/* signature device: cyan left accent bar on highlighted content */
.nb-accent-block {
  border-left: 3px solid var(--accent-bright);
  padding-left: var(--s5);
}

/* ---- Chrome (header/footer bars) ---- */
.nb-chrome {
  background: var(--deep);
  color: var(--on-deep);
  border-bottom: 2px solid var(--accent-bright);  /* the accent seam */
}

/* ---- Status badges ---- */
.nb-badge {
  display: inline-block;
  padding: var(--s1) var(--s4);
  border-radius: var(--r-pill);
  font: 500 var(--fs-small) var(--body-font);
}
.nb-badge--pass { background: var(--pass-bg); color: var(--pass-text); }
.nb-badge--fail { background: var(--fail-bg); color: var(--fail-text); }
.nb-badge--warn { background: var(--warn-bg); color: var(--warn-text); }

/* ---- Tables (dense data grid) ---- */
.nb-table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); }
.nb-table th {
  position: sticky; top: 0;
  background: var(--surface-2);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-strong);
}
.nb-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.nb-table tr:nth-child(even) td { background: color-mix(in srgb, var(--deep) 2%, transparent); }
.nb-table td.nb-td-num { text-align: right; font-family: var(--mono-font); font-variant-numeric: tabular-nums; }

/* ---- Graphic corner elements ----
   Usage: <div class="nb-surface"> <img class="nb-elem nb-elem--br" src=".../corners/NordiskaBrand_corner_droppen_br_1200w.png" alt=""> ... </div>
   Or with the recolorable SVG: <img class="nb-elem nb-elem--br" src=".../svg/NordiskaBrand_element_br.svg">
   RULE: the elements' straight sides must sit flush with the surface edges —
   these classes guarantee that. Never rotate freely, never float mid-surface. */
.nb-surface { position: relative; overflow: hidden; }
.nb-elem {
  position: absolute;
  width: 45%;
  pointer-events: none;
  user-select: none;
}
.nb-elem--bl { left: 0;  bottom: 0; }   /* original / *_bl: straight left  */
.nb-elem--br { right: 0; bottom: 0; }   /* mirrored / *_br: straight right */
.nb-elem--tl { left: 0;  top: 0; }      /* *_tl files: straight left, flat top */
.nb-elem--tr { right: 0; top: 0; }      /* *_tr files: straight right, flat top */
/* If you only have the ORIGINAL (bl) image, derive the others with transforms: */
.nb-elem--br.nb-elem--from-bl { transform: scaleX(-1); }
.nb-elem--tl.nb-elem--from-bl { transform: scaleY(-1); }
.nb-elem--tr.nb-elem--from-bl { transform: rotate(180deg); }

/* ---- Links ---- */
.nb-link {
  color: var(--wave);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--wave) 40%, transparent);
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--dur-control) var(--ease);
}
.nb-link:hover { text-decoration-color: var(--wave); }
.nb-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-1),
              0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 2px;
}

/* ---- Tagline ---- */
/* "Tillsammans sätter vi standarden för säkrare byggnader."
   The word "standarden" is ALWAYS underlined in Droppen,
   underline thickness = letter stroke thickness. */
.nb-tagline-mark {
  text-decoration: underline;
  text-decoration-color: var(--drop);
  text-decoration-thickness: 0.085em;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .nb-btn, .nb-field { transition: none; }
}