/* ============================================================
   MATERIASCOPE — design tokens
   Drop-in. Dark is the default; .ms-light flips to print/export.
   ============================================================ */

:root{
  /* ---- Surfaces (dark, default) ---- */
  --ms-void:      #07090D;   /* page background, deepest */
  --ms-ink:       #0B0D12;   /* app background */
  --ms-surface:   #12151C;   /* cards, panels */
  --ms-surface-2: #1A1E27;   /* raised: modals, popovers, hover */
  --ms-line:      #232833;   /* default border */
  --ms-line-2:    #39414F;   /* hover / focused border */

  /* ---- Text ---- */
  --ms-text:      #F4F6F8;   /* primary */
  --ms-text-2:    #B4BCC8;   /* secondary, body copy */
  --ms-text-3:    #7E8796;   /* muted, labels, captions */
  --ms-text-4:    #6B7686;   /* faint — 3,9:1 na --ms-surface */
  --ms-text-dis:  #57606E;   /* disabled only — 2,87:1, nie dla treści */

  /* ---- Accent: EMBER. The beam hitting the sample. ---- */
  --ms-ember:      #FF5C35;
  --ms-ember-hi:   #FF7A5A;
  --ms-ember-lo:   #E04520;
  --ms-ember-08:   rgba(255,92,53,.08);
  --ms-ember-16:   rgba(255,92,53,.16);
  --ms-ember-32:   rgba(255,92,53,.32);

  /* ---- Secondary: BEAM. Data only, never UI chrome. ---- */
  --ms-beam:       #5EE7C4;
  --ms-beam-16:    rgba(94,231,196,.16);

  /* ---- Semantic ---- */
  --ms-ok:      #4ADE80;
  --ms-warn:    #FBBF24;
  --ms-risk:    #F87171;
  --ms-info:    #60A5FA;

  /* ---- Material-class palette ----
     These six ARE the chart legend. Never reassign them. */
  --ms-metal:    #2763D7;  /* metale i stopy        odcień 262° */
  --ms-ceramic:  #B68611;  /* ceramika              odcień  82° */
  --ms-polymer:  #00A59E;  /* polimery              odcień 190° */
  --ms-composite:#B82771;  /* kompozyty             odcień 355° */
  --ms-semi:     #A973D5;  /* półprzewodniki        odcień 308° */
  --ms-bio:      #536F00;  /* naturalne/biologiczne odcień 125° */

  /* obwiednie klas na wykresie Ashby'ego — 12% krycia */
  --ms-metal-12:    rgba(39,99,215,.12);
  --ms-ceramic-12:  rgba(182,134,17,.12);
  --ms-polymer-12:  rgba(0,165,158,.12);
  --ms-composite-12:rgba(184,39,113,.12);
  --ms-semi-12:     rgba(169,115,213,.12);
  --ms-bio-12:      rgba(83,111,0,.12);

  /* ---- Confidence: measured vs predicted ---- */
  --ms-measured:  var(--ms-text);      /* pełna krycie, solid */
  --ms-predicted: var(--ms-text-3);    /* wyszarzone, kreskowane */

  /* ---- Type ----
     Brand decision 08.2026: the UI family is Montserrat (self-hosted via
     @fontsource-variable, imported in globals.css). Numbers stay in JetBrains
     Mono — Montserrat has no mono cut and rule 2 needs tabular figures. */
  --ms-font: "Montserrat Variable", Montserrat, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ms-mono: "JetBrains Mono Variable", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Space (4px base) ---- */
  --ms-1:4px; --ms-2:8px; --ms-3:12px; --ms-4:16px; --ms-5:24px;
  --ms-6:32px; --ms-7:48px; --ms-8:64px; --ms-9:96px; --ms-10:128px;

  /* ---- Radius ---- */
  --ms-r-sm:6px; --ms-r-md:10px; --ms-r-lg:14px; --ms-r-xl:20px; --ms-r-pill:999px;

  /* ---- Motion. One easing. Decisive, like a shutter. ---- */
  --ms-ease: cubic-bezier(.2,0,0,1);
  --ms-fast:120ms; --ms-base:200ms; --ms-slow:360ms;

  /* ---- Layout ---- */
  --ms-max: 1180px;
  --ms-gutter: 24px;
}

/* Light mode exists only for print, PDF export and datasheets. */
.ms-light{
  --ms-void:#FFFFFF; --ms-ink:#FFFFFF; --ms-surface:#F4F6F8; --ms-surface-2:#EAEEF2;
  --ms-line:#DDE2E8; --ms-line-2:#C2C9D2;
  --ms-text:#0B0D12; --ms-text-2:#3C4553; --ms-text-3:#6B7482; --ms-text-4:#7B8492;
  --ms-measured:var(--ms-text); --ms-predicted:var(--ms-text-3);
  /* Klasy materiałów mają w druku własne, ciemniejsze stopnie tych samych
     odcieni. Wersje ciemnego trybu miały na białym 1,65–2,54:1 i były
     na wydruku nieczytelne. Te przechodzą pełną walidację.               */
  --ms-metal:    #284E99;
  --ms-ceramic:  #A17501;
  --ms-polymer:  #00908B;
  --ms-composite:#9D1E60;
  --ms-semi:     #995BCA;
  --ms-bio:      #455C00;
  --ms-metal-12:    rgba(40,78,153,.12);
  --ms-ceramic-12:  rgba(161,117,1,.12);
  --ms-polymer-12:  rgba(0,144,139,.12);
  --ms-composite-12:rgba(157,30,96,.12);
  --ms-semi-12:     rgba(153,91,202,.12);
  --ms-bio-12:      rgba(69,92,0,.12);
  /* #FF5C35 na białym = 2,84:1. Ten stopień = 5,1:1. */
  --ms-ember:    #C23A18;
}

/* ============================================================
   TYPE SCALE
   ============================================================ */
.ms-display-xl{font:600 clamp(40px,6vw,56px)/1.02 var(--ms-font);letter-spacing:-.035em}
.ms-display   {font:600 clamp(30px,4.4vw,40px)/1.06 var(--ms-font);letter-spacing:-.03em}
.ms-h1        {font:600 30px/1.15 var(--ms-font);letter-spacing:-.025em}
.ms-h2        {font:600 22px/1.25 var(--ms-font);letter-spacing:-.02em}
.ms-h3        {font:600 17px/1.35 var(--ms-font);letter-spacing:-.015em}
.ms-body-lg   {font:400 16px/1.6  var(--ms-font);color:var(--ms-text-2)}
.ms-body      {font:400 14.5px/1.62 var(--ms-font);color:var(--ms-text-2)}
.ms-small     {font:400 13px/1.55 var(--ms-font);color:var(--ms-text-3)}
.ms-caption   {font:400 12px/1.5  var(--ms-font);color:var(--ms-text-3)}

.ms-eyebrow{
  font:500 11px/1 var(--ms-font);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ms-text-3);
}

/* Every number in this product is monospace with tabular figures. */
.ms-data-xl{font:500 34px/1 var(--ms-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ms-data   {font:500 15px/1.4 var(--ms-mono);font-variant-numeric:tabular-nums}
.ms-unit   {font:400 12px/1 var(--ms-mono);color:var(--ms-text-3);margin-left:.35em}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.ms-card{
  background:var(--ms-surface);border:1px solid var(--ms-line);
  border-radius:var(--ms-r-lg);padding:var(--ms-5);
  transition:border-color var(--ms-base) var(--ms-ease);
}
.ms-card:hover{border-color:var(--ms-line-2)}

/* Source chip — legally required next to every number we publish. */
.ms-source{
  display:inline-flex;align-items:center;gap:6px;
  font:400 11px/1 var(--ms-mono);color:var(--ms-text-3);
  border:1px solid var(--ms-line);border-radius:var(--ms-r-pill);
  padding:5px 10px;
}
.ms-source::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ms-text-4)}
.ms-source[data-kind="measured"]::before{background:var(--ms-ok)}
.ms-source[data-kind="dft"]::before{background:var(--ms-info)}
.ms-source[data-kind="predicted"]::before{background:var(--ms-warn)}

.ms-tag{
  display:inline-block;font:500 11px/1 var(--ms-font);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--ms-r-sm);
  background:var(--ms-surface-2);color:var(--ms-text-3);border:1px solid var(--ms-line);
}
.ms-tag[data-class="metal"]    {color:var(--ms-metal);   border-color:color-mix(in srgb,var(--ms-metal) 35%,transparent)}
.ms-tag[data-class="ceramic"]  {color:var(--ms-ceramic); border-color:color-mix(in srgb,var(--ms-ceramic) 35%,transparent)}
.ms-tag[data-class="polymer"]  {color:var(--ms-polymer); border-color:color-mix(in srgb,var(--ms-polymer) 35%,transparent)}
.ms-tag[data-class="composite"]{color:var(--ms-composite);border-color:color-mix(in srgb,var(--ms-composite) 35%,transparent)}
.ms-tag[data-class="semi"]     {color:var(--ms-semi);    border-color:color-mix(in srgb,var(--ms-semi) 35%,transparent)}
.ms-tag[data-class="bio"]      {color:var(--ms-bio);     border-color:color-mix(in srgb,var(--ms-bio) 35%,transparent)}

.ms-btn{
  font:500 14px/1 var(--ms-font);padding:12px 20px;border-radius:var(--ms-r-md);
  border:1px solid var(--ms-line-2);background:transparent;color:var(--ms-text);cursor:pointer;
  transition:background var(--ms-fast) var(--ms-ease),border-color var(--ms-fast) var(--ms-ease);
}
.ms-btn:hover{background:var(--ms-surface-2)}
.ms-btn--primary{background:var(--ms-ember);border-color:var(--ms-ember);color:var(--ms-ink);font-weight:600}
.ms-btn--primary:hover{background:var(--ms-ember-hi);border-color:var(--ms-ember-hi)}

/* Lists use em-dash gutters, never bullets. */
.ms-list{list-style:none;padding:0;margin:0}
.ms-list li{position:relative;padding-left:22px;margin-bottom:10px;font:400 14.5px/1.6 var(--ms-font);color:var(--ms-text-2)}
.ms-list li::before{content:"—";position:absolute;left:0;color:var(--ms-text-4)}

/* Divider */
.ms-rule{height:1px;background:var(--ms-line);border:0;margin:var(--ms-6) 0}

/* ============================================================
   SIGNATURE MOTION — "focus"
   Rings contracting inward. Use for loading, never for decoration.
   ============================================================ */
@keyframes ms-focus{
  0%   {transform:scale(1.18);opacity:0}
  35%  {opacity:.9}
  100% {transform:scale(.82);opacity:0}
}
.ms-focus-ring{transform-origin:center;animation:ms-focus 1.6s var(--ms-ease) infinite}
.ms-focus-ring:nth-child(2){animation-delay:.2s}
.ms-focus-ring:nth-child(3){animation-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .ms-focus-ring{animation:none;opacity:.5}
  *{transition-duration:.01ms !important}
}

/* ============================================================
   LOCKUP — tagline rozciągnięty dokładnie na szerokość wordmarku
   Trzy liczby wystarczą; skalują się proporcjonalnie z --ms-wm.
   letter-spacing dokłada szczelinę TAKŻE po ostatnim znaku,
   dlatego margin-right ją zdejmuje. Bez tego tagline wystaje.
   ============================================================ */
.ms-lockup{display:inline-flex;width:max-content;align-items:center;gap:calc(var(--ms-wm,26px)*.34)}
.ms-lockup--v{flex-direction:column;gap:calc(var(--ms-wm,26px)*.5)}
.ms-lockup>div{flex:none;display:flex;flex-direction:column;align-items:flex-start}
.ms-wordmark{
  display:inline-block;white-space:nowrap;
  font:600 var(--ms-wm,26px)/1 var(--ms-font);letter-spacing:-.035em;color:var(--ms-text);
}
.ms-wordmark span{color:var(--ms-text-3)}         /* człon "scope" */
.ms-tagline{
  display:inline-block;white-space:nowrap;text-transform:uppercase;
  font:500 calc(var(--ms-wm,26px)*.265)/1.4 var(--ms-font);color:var(--ms-text-4);
  margin-top:calc(var(--ms-wm,26px)*.18);
  /* Przemierzone dla Montserrat 600/500 z krawędzi atramentu (dla Inter było
     .529em). Zmieniasz krój — mierzysz ponownie, nie zgadujesz. */
  letter-spacing:.415em;margin-right:-.415em;
}

/* ============================================================
   WYKRES — kodowanie pewności danych. Nigdy opcjonalne.
   ============================================================ */
.ms-serie[data-confidence="measured"]  { opacity:1 }
.ms-serie[data-confidence="dft"]       { opacity:1 }
.ms-serie[data-confidence="predicted"] { opacity:.6; stroke-dasharray:4 3 }
.ms-dot[data-confidence="measured"]    { fill:currentColor; stroke:none }
.ms-dot[data-confidence="dft"]         { fill:var(--ms-surface); stroke:currentColor; stroke-width:1.6 }
.ms-dot[data-confidence="predicted"]   { fill:none; stroke:currentColor; stroke-width:1.4; opacity:.6 }
.ms-dot[data-selected]                 { fill:var(--ms-ember); stroke:var(--ms-surface); stroke-width:2 }