/* ==========================================================================
   MATRIO — design tokens
   Wersja 1.1 · lipiec 2026
   Paleta: wariant 04 „Ewolucja wordmarku", kolorystyka A — Granat + Wermilion
   Import w projekcie:  @import url("brand/tokens.css");
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  /* ── Kolory marki ───────────────────────────────────────────────────── */
  --m-navy:       #1B3A6B;   /* Granat MATRIO — kolor bazowy marki         */
  --m-navy-deep:  #16305A;   /* Granat głęboki — tła, og-image             */
  --m-ink:        #1B3A6B;   /* alias koloru podstawowego (tekst, logotyp) */
  --m-graphite:   #4A5568;   /* tekst pomocniczy, drugi plan               */
  --m-red:        #E8402F;   /* Wermilion — akcent, jasne tła              */
  --m-red-bright: #FF6A4D;   /* Wermilion Light — akcent na ciemnych tłach */

  /* ── Neutralne ──────────────────────────────────────────────────────── */
  --m-black:      #101C2E;   /* tło ciemnych sekcji (granatowa czerń)      */
  --m-surface:    #16253A;   /* karty na ciemnym tle                       */
  --m-paper:      #F6F8FB;   /* tło jasnych sekcji                         */
  --m-white:      #FFFFFF;
  --m-line:       #DFE5EE;   /* obramowania na jasnym tle                  */
  --m-line-dark:  rgba(255,255,255,.12);
  --m-muted:      #64748B;   /* tekst pomocniczy na jasnym tle             */
  --m-muted-dark: #9DB0CA;   /* tekst pomocniczy na ciemnym tle            */

  /* ── Typografia ─────────────────────────────────────────────────────── */
  --m-font-display: 'Lato', 'Helvetica Neue', Arial, sans-serif;   /* nagłówki, logotyp */
  --m-font-ui:      'Poppins', system-ui, -apple-system, sans-serif; /* UI, nawigacja   */
  --m-font-body:    'Lato', system-ui, sans-serif;                 /* tekst czytany     */

  --m-track-logo:   .075em;  /* światło międzyliterowe logotypu            */
  --m-track-caps:   .16em;   /* światło dla wersalików / tagline           */

  /* skala typograficzna (fluid) */
  --m-fs-hero:  clamp(2.2rem, 5.5vw, 3.9rem);
  --m-fs-h2:    clamp(1.6rem, 3.4vw, 2.4rem);
  --m-fs-h3:    1.22rem;
  --m-fs-body:  1rem;
  --m-fs-small:  .875rem;
  --m-fs-kicker: .8rem;

  /* ── Rytm i geometria ───────────────────────────────────────────────── */
  --m-space-1: 8px;   --m-space-2: 16px;  --m-space-3: 24px;
  --m-space-4: 40px;  --m-space-5: 64px;  --m-space-6: 96px;

  --m-radius-sm: 8px;
  --m-radius:    16px;
  --m-radius-lg: 24px;
  --m-radius-pill: 999px;

  --m-max-width: 1080px;

  /* ── Cień ───────────────────────────────────────────────────────────── */
  --m-shadow-sm: 0 1px 2px rgba(27,58,107,.07), 0 2px 8px rgba(27,58,107,.06);
  --m-shadow:    0 4px 12px rgba(27,58,107,.10), 0 12px 32px rgba(27,58,107,.08);

  /* ── Wysokość logotypu (pole ochronne = 0.5 × wysokość sygnetu) ──────── */
  --m-logo-h:       40px;
  --m-logo-h-lg:    56px;
  --m-logo-clear:   calc(var(--m-logo-h) * .5);
}

/* ── Sekcja ciemna: przemapowanie tokenów ───────────────────────────────── */
.m-dark{
  --m-ink:      #FFFFFF;
  --m-red:      var(--m-red-bright);
  --m-paper:    var(--m-black);
  --m-line:     var(--m-line-dark);
  --m-muted:    var(--m-muted-dark);
}

/* ── Sekcja na kolorze marki ─────────────────────────────────────────────── */
.m-brand{
  --m-ink:      #FFFFFF;
  --m-red:      var(--m-red-bright);
  --m-paper:    var(--m-navy);
  --m-line:     var(--m-line-dark);
  --m-muted:    rgba(255,255,255,.72);
}

/* ── Klasy pomocnicze logotypu ──────────────────────────────────────────── */
.m-logo      { height: var(--m-logo-h);    width: auto; display: block; }
.m-logo--lg  { height: var(--m-logo-h-lg); }
.m-logo-wrap { padding: var(--m-logo-clear); }

/* ── Bazowe style typograficzne ─────────────────────────────────────────── */
.m-kicker{
  font-family: var(--m-font-body); font-weight: 700;
  font-size: var(--m-fs-kicker); letter-spacing: var(--m-track-caps);
  text-transform: uppercase; color: var(--m-red);
}
.m-h1{ font-family: var(--m-font-display); font-weight: 900; font-size: var(--m-fs-hero); line-height:1.08; letter-spacing:-.01em; }
.m-h2{ font-family: var(--m-font-display); font-weight: 900; font-size: var(--m-fs-h2);   line-height:1.15; }
.m-h3{ font-family: var(--m-font-ui);      font-weight: 600; font-size: var(--m-fs-h3);   line-height:1.3; }
.m-body{ font-family: var(--m-font-body); font-size: var(--m-fs-body); line-height:1.65; }