/* ============================================================================
   npb-insights.ch — design tokens
   ============================================================================
   The single definition of colour, type, shape and spacing for this site.
   Lifted from NPB3D-template.html, which is the reference implementation
   (ARCHITECTURE.md §6). Never write a literal colour anywhere else.

   TWO COLOUR SYSTEMS. They must not be mixed.

     1. Interface ramp — cool neutrals. All chrome, text and rules.
     2. Brand and data  — NPB red is chrome only, never body text.

   The warm brand-kit greys (--npb-grey, --npb-dark, --npb-light) belong to
   CHARTS AND PRINT OUTPUT. They are declared here because the brand kit is the
   source of truth for them, and because the corporate mark uses --npb-grey for
   its logotype slot. Do not reach for them for UI text or borders.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Corporate S — self-hosted, behind the fallback stack.
   Licence confirmed by André, 22.08.2026: the webfont right is NPB's. Web use
   is settled and these files can ship.

   The fallback stack still has to carry the whole site on its own, and the
   mark stays an outlined vector path rather than live type. Neither of those
   was a licence hedge: a font can fail to load for a hundred other reasons,
   and the bank's own mark is the last thing that should reflow when it does.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Corporate S";
  src:url("../fonts/CorporateS-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Corporate S";
  src:url("../fonts/CorporateS-Italic.otf") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Corporate S";
  src:url("../fonts/CorporateS-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Corporate S";
  src:url("../fonts/CorporateS-BoldItalic.otf") format("opentype");
  font-weight:700; font-style:italic; font-display:swap;
}

:root{
  /* --- 1. interface ramp — cool neutrals ---------------------------------- */
  --ink:#12131a;                 /* primary ink */
  --ink-2:#3f4453;               /* secondary */
  --ink-3:#6b7180;               /* muted */
  --line:#e4e6ec;                /* hairline */
  --line-2:#eef0f4;              /* lighter hairline */
  --surface:#ffffff;             /* cards, panels, topbar */
  --plane:#f4f5f8;               /* page plane */
  --plane-2:#eceef3;             /* recessed fill */
  --navy:#1b2540;                /* deep accent for headers */

  /* --- 2. brand ----------------------------------------------------------- */
  --npb-red:#d0043c;             /* chrome only: active tab, primary button,
                                    kicker, rules. NEVER body text. */
  --npb-red-deep:#a80331;

  /* semantic — data only */
  --pos:#0a7d3c;  --pos-bg:rgba(10,125,60,.09);
  --neg:#c01530;  --neg-bg:rgba(192,21,48,.08);

  /* --- brand kit warm greys — CHARTS AND PRINT ONLY ----------------------- */
  --npb-dark:#605548;
  --npb-grey:#aaa095;
  --npb-light:#d4cfca;

  /* The logotype slot of the corporate mark, and the app-name slot of the
     lockup, carry the brand grey. This is artwork, not interface text — that
     is why it is allowed to be warm. It is aliased rather than used directly
     so the intent is legible at the call site. */
  --lockup-name:var(--npb-grey);

  /* --- extended chart palette — multi-series only ------------------------- */
  --series-1:#2B4A6F; --series-2:#2E7D7B; --series-3:#B8923E; --series-4:#6A7F5D;
  --series-5:#5E7F9A; --series-6:#7D3648; --series-7:#9E6F4B; --series-8:#6B4D6E;
  --series-9:#89A7B8; --series-10:#C4A87D;

  /* --- type --------------------------------------------------------------- */
  /* ONE face, everywhere. No display serif — it was tried on sheet titles and
     the landing wordmark and removed as off-brand (André, 14.08.2026).
     Contrast comes from weight and letterspacing only. */
  --sans:"Corporate S",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- shape -------------------------------------------------------------- */
  --r-panel:12px;
  --r-btn:9px;
  --r-card:18px;
  --shadow:0 1px 2px rgba(18,19,26,.05),0 8px 28px rgba(18,19,26,.06);
  --shadow-panel:0 1px 2px rgba(18,19,26,.04);

  /* --- measure ------------------------------------------------------------ */
  --wrap:1500px;                 /* max content width, matches 3D */
  --gutter:clamp(1rem,4vw,2.4rem);

  /* The lockup is sized by HEIGHT, never width — the viewBox widens with the
     app name, so a fixed width silently shrinks the mark on longer names.
     Mobile first: this is the 390px value and the query below grows it. */
  --lockup-h:34px;

  /* Measured by shell.js into the real height of the sticky topbar-plus-nav
     block. This default only has to be close, and only matters where the app
     rail sticks, which is a wide viewport with scripting off. */
  --chrome-h:110px;
}

@media (min-width:600px){
  :root{--lockup-h:46px}
}