/* ============================================================
   MALUSZEK — Design Tokens
   Source: Figma  /  file k27G77yYhK078kvdXn5j2L
   AUTO-GENERATED from Figma variables — do not edit manually
   ============================================================ */

:root {

  /* ── Neutral ──────────────────────────────────────────────── */
  --neutral-0:    #ffffff;
  --neutral-50:   #fafbfc;
  --neutral-100:  #dee3ea;   /* borders / dividers */
  --neutral-700:  #58595d;   /* secondary / muted text */
  --neutral-800:  #424345;   /* body text */
  --neutral-900:  #2c2d2d;   /* strong text */
  --neutral-950:  #161616;   /* headings */

  /* ── Flame Pea (primary / brand orange-red) ───────────────── */
  --flame-pea-50:  #fefbfa;  /* button text on orange bg */
  --flame-pea-100: #f7ddd6;  /* light tint */
  --flame-pea-500: #dc5c43;  /* primary action colour */
  --flame-pea-600: #c94328;  /* highlighted words in H1, hover */
  --flame-pea-700: #a13823;  /* link buttons ("Więcej") */
  --flame-pea-800: #7a2c1c;  /* darkest tint */

  /* ── Picton Blue (navy / accent blue) ─────────────────────── */
  --picton-blue-50:  #dfeff7; /* tag / badge borders */
  --picton-blue-200: #a6d3eb; /* hero gradient top colour */
  --picton-blue-500: #4fa4d7;
  --picton-blue-600: #3293ce; /* links / accents */
  --picton-blue-900: #20506e;
  --picton-blue-950: #183a4f; /* nav text, footer headings */

  /* ── Green (availability badge) ──────────────────────────── */
  --green: #3d931e;

  /* ── Semantic aliases ─────────────────────────────────────── */
  --color-primary:       var(--flame-pea-500);
  --color-primary-dark:  var(--flame-pea-600);
  --color-primary-dim:   var(--flame-pea-700);
  --color-primary-light: var(--flame-pea-100);
  --color-primary-bg:    var(--flame-pea-50);

  --color-navy:          var(--picton-blue-950);
  --color-blue:          var(--picton-blue-600);
  --color-blue-light:    var(--picton-blue-50);
  --color-blue-tint:     var(--picton-blue-200);

  --color-text:          var(--neutral-800);
  --color-text-strong:   var(--neutral-950);
  --color-text-muted:    var(--neutral-700);
  --color-border:        var(--neutral-100);
  --color-surface:       var(--neutral-50);
  --color-white:         var(--neutral-0);

  /* ── Typography ───────────────────────────────────────────── */
  --font: 'Poppins', sans-serif;

  /*  Scale from Figma text styles                               */
  /*  name           size  weight  lineHeight                    */
  /*  H1             56px  700     72px                          */
  /*  H2             48px  500     64px                          */
  /*  H3             40px  600     56px                          */
  /*  H5             24px  600     32px                          */
  /*  H6             20px  600     32px                          */
  /*  P-Big          20px  400     32px                          */
  /*  P-Regular      16px  400     22px                          */
  /*  P-Small        14px  400     20px                          */
  /*  Label-Regular  16px  500     22px                          */
  /*  Label-Small    14px  500     20px                          */
  /*  Caption        12px  400     18px                          */

  --text-h1-size:   56px;
  --text-h1-weight: 700;
  --text-h1-lh:     72px;

  --text-h2-size:   48px;
  --text-h2-weight: 500;
  --text-h2-lh:     56px;

  --text-h3-size:   40px;
  --text-h3-weight: 600;
  --text-h3-lh:     56px;

  --text-h5-size:   24px;
  --text-h5-weight: 600;
  --text-h5-lh:     32px;

  --text-h6-size:   20px;
  --text-h6-weight: 600;
  --text-h6-lh:     32px;

  --text-p-big-size:   20px;
  --text-p-big-weight: 400;
  --text-p-big-lh:     32px;

  --text-p-size:   16px;
  --text-p-weight: 400;
  --text-p-lh:     22px;

  --text-p-sm-size:   14px;
  --text-p-sm-weight: 400;
  --text-p-sm-lh:     20px;

  --text-label-size:   16px;
  --text-label-weight: 500;
  --text-label-lh:     22px;

  --text-label-sm-size:   14px;
  --text-label-sm-weight: 500;
  --text-label-sm-lh:     20px;

  --text-caption-size:   12px;
  --text-caption-weight: 400;
  --text-caption-lh:     18px;

  /* ── Border radii ─────────────────────────────────────────── */
  --r-sm:   8px;   /* small elements */
  --r-md:   24px;  /* cards, modals */
  --r-pill: 99px;  /* buttons, tags, badges */

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-card: 0px 1px 40px -12px rgba(0,0,0,0.04), 0px 2px 24px 0px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.09);

  /* ── Spacing / layout ─────────────────────────────────────── */
  --max-width:  1200px;
  --section-py: 80px;
  --header-h:   100px;   /* top bar ~44 + main nav ~56 */
  --header-h-collapsed: 64px;

  /* 12-column grid (matches Figma column layout).
     With 1200 container + 24 gutter:
       column width  = (1200 − 11·24) / 12 ≈ 78px
       5 cols + gutters  ≈ 486px   (typical text column)
       6 cols + gutters  ≈ 588px   (typical image column, 4:3 → 441h)
       1-col gap         = 126px (col-6 + surrounding gutters)  */
  --grid-cols: 12;
  --grid-gap:  24px;
  --gap-xs:      4px;
  --gap-sm:      8px;
  --gap-md:     12px;
  --gap-lg:     16px;
  --gap-xl:     24px;
  --gap-2xl:    32px;
  --gap-3xl:    48px;

  /* ── Transitions ──────────────────────────────────────────── */
  --transition: .2s ease;
}