/* =============================================================
   INVERSIS Design System — Foundations
   Polish industrial brand. Containerised solutions across
   Energy, IT Infrastructure, Defense and Contract Manufacturing.
   Typography pairing:
     • DM Serif Display — editorial display H1s, UPPERCASE, with
       a signature orange period (.) at the end of each headline
     • Archivo — every other surface (nav, body, eyebrows, CTAs,
       stat values, footer columns)
     • JetBrains Mono — reserved for spec identifiers in future
       product UIs (not used on marketing)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Archivo:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -------- Primary brand --------------------------------- */
  --inv-orange:        #ED7E2C;   /* primary accent, CTAs, active state */
  --inv-orange-600:    #D86A1A;   /* hover / pressed */
  --inv-orange-700:    #B85613;   /* deep hover */
  --inv-orange-100:    #FBE3D0;   /* soft halo behind icons */
  --inv-orange-50:     #FDF1E6;   /* subtle tint */

  --inv-red:           #8E1F1F;   /* logo dot field — secondary brand */
  --inv-red-dark:      #5A1313;
  --inv-red-50:        #F7E4E4;

  /* -------- Neutrals (warm, paper-y) ----------------------- */
  --inv-ink:           #1A1A1A;   /* fg1 — headings, primary text */
  --inv-ink-2:         #3A3A3A;   /* fg2 — body */
  --inv-ink-3:         #6B6B6B;   /* fg3 — secondary / labels */
  --inv-ink-4:         #A0A0A0;   /* fg4 — placeholder, muted */

  --inv-paper:         #FAF8F5;   /* bg1 — page background (warm off-white) */
  --inv-paper-2:       #F3EFE9;   /* bg2 — card / surface tint */
  --inv-paper-3:       #E8E2D8;   /* bg3 — accent strip / hover panel */
  --inv-line:          #E0DAD0;   /* hairline border */
  --inv-line-2:        #CFC8BC;   /* stronger border */
  --inv-white:         #FFFFFF;   /* pure white surface */

  /* -------- Semantic --------------------------------------- */
  --inv-success:       #2E7D32;
  --inv-warning:       #F4A52A;
  --inv-danger:        #C0392B;
  --inv-info:          #2C6EED;

  /* -------- Typography tokens ------------------------------ */
  --font-display:      'DM Serif Display', 'Georgia', 'Times New Roman', serif;
  --font-body:         'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-ui:           'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (px-based, generous for industrial feel) */
  --fs-display:        clamp(48px, 6vw, 88px);   /* @kind font */
  --fs-h1:             clamp(36px, 4.2vw, 56px);  /* @kind font */
  --fs-h2:             32px;
  --fs-h3:             22px;
  --fs-h4:             18px;
  --fs-body:           16px;
  --fs-small:          14px;
  --fs-xs:             12px;
  --fs-eyebrow:        13px;    /* uppercase orange labels */

  --lh-display:        1.02;   /* @kind font */
  --lh-heading:        1.15;   /* @kind font */
  --lh-body:           1.55;   /* @kind font */
  --lh-tight:          1.25;   /* @kind font */

  --tracking-display:  -0.01em;
  --tracking-eyebrow:  0.14em;
  --tracking-caps:     0.06em;

  /* -------- Spacing (4px base) ----------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* -------- Radii (very modest — industrial, squared) ------ */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;     /* default card */
  --r-3:   6px;     /* buttons, chips */
  --r-pill: 999px;

  /* -------- Shadows (soft, paper-on-paper) ----------------- */
  --sh-1: 0 1px 2px rgba(26,26,26,.04), 0 1px 0 rgba(26,26,26,.02);
  --sh-2: 0 2px 6px rgba(26,26,26,.06), 0 1px 2px rgba(26,26,26,.04);
  --sh-3: 0 8px 24px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.04);
  --sh-cta: 0 6px 18px rgba(237,126,44,.28);   /* @kind shadow */
  --sh-inset: inset 0 0 0 1px var(--inv-line);

  /* -------- Motion ---------------------------------------- */
  --ease-out:  cubic-bezier(.2, .8, .2, 1);   /* @kind other */
  --ease-std:  cubic-bezier(.4, 0, .2, 1);   /* @kind other */
  --t-fast:    120ms;   /* @kind other */
  --t-base:    180ms;   /* @kind other */
  --t-slow:    320ms;   /* @kind other */
}

/* =============================================================
   Semantic element styles
   ============================================================= */

html, body {
  background: var(--inv-paper);
  color: var(--inv-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;          /* DM Serif Display ships at 400 only */
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--inv-ink);
  text-transform: uppercase;
  margin: 0;
}

/* Signature: every H1 ends with an orange period.            */
/* Use either via <span class="dot">.</span> or via the helper */
/* utility class .h1--with-dot which adds it automatically.   */
.h1 .dot,
.dot--brand {
  color: var(--inv-orange);
}
.h1--with-dot::after {
  content: '.';
  color: var(--inv-orange);
}

h2, .h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--inv-ink);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--inv-ink);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--inv-ink);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--inv-ink-2);
  text-wrap: pretty;
  margin: 0;
}

.small  { font-size: var(--fs-small); color: var(--inv-ink-3); }
.xs     { font-size: var(--fs-xs);    color: var(--inv-ink-3); }

/* Eyebrow — small uppercase orange label used above section titles  */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--inv-orange);
}

/* Section label inside cards e.g. "SPECYFIKACJA TECHNICZNA" */
.section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--inv-ink);
}
.section-label--accent { color: var(--inv-orange); }

/* Numeric stat — used for stat tiles (350 kg/h, 10 bar) */
.stat-value {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--inv-ink);
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--inv-ink-3);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: .92em;
}

a {
  color: var(--inv-ink);
  text-decoration-color: var(--inv-orange);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--t-base) var(--ease-out);
}
a:hover { color: var(--inv-orange); }

hr.divider-orange {
  border: none;
  height: 3px;
  width: 56px;
  background: var(--inv-orange);
  margin: 16px 0 24px;
}