/* ===================================================================
   RATUJESZ24 - Design Tokens
   Foundations: colour + typography
   "SZKOLIMY, BY NAUCZYC - NIE BY ZALICZYC"
   -------------------------------------------------------------------
   Base brand constants (DO NOT CHANGE - z globalnych ustawien
   Breakdance obecnej strony ratujesz24.pl):
     Brand / accent   #FF2323   (czerwien ratownicza)
     Body text        #000000   (renderowane jako near-black)
     Headings         #000000   (renderowane jako near-black)
     Background       #FFFFFF   (czysta biel)
     Heading font     Archivo (zmiana zatwierdzona przez Pawla 2026-08-04; wczesniej Roboto)
     Body font        Manrope (wczesniej Lato)
     Base size        16px
   Everything else is built around these values.
   UWAGA: nazwy zmiennych sa wspoldzielone z warstwa kleju (theme.css,
   w tym pelne style koszyka/checkout z motywu-wzorca) - NIE zmieniac nazw.
   =================================================================== */

/* Fonty ladowane w inc/enqueue.php (Google Fonts, subset latin-ext -
   pelne polskie znaki: a c e l n o s z z). */

:root {
  /* ---------------------------------------------------------------
     1. COLOUR - BRAND (czerwien ratownicza)  anchor 500 = #FF2323
     --------------------------------------------------------------- */
  --brand-50:  #fff1f0;
  --brand-100: #ffdedc;
  --brand-200: #ffbcb8;
  --brand-300: #ff938d;
  --brand-400: #ff5f57;
  --brand-500: #FF2323;   /* BASE brand / accent */
  --brand-600: #e51212;
  --brand-700: #bd0d0f;
  --brand-800: #8f0c0e;
  --brand-900: #5f0a0b;

  /* ---------------------------------------------------------------
     2. COLOUR - TEXT (near-black na bieli)  anchor 500 = #3d3d3d
     --------------------------------------------------------------- */
  --text-50:  #f7f7f7;
  --text-100: #ebebeb;
  --text-200: #d6d6d6;
  --text-300: #ababab;
  --text-400: #6e6e6e;
  --text-500: #3d3d3d;    /* BASE body text */
  --text-600: #303030;
  --text-700: #242424;
  --text-800: #181818;
  --text-900: #0d0d0d;

  /* ---------------------------------------------------------------
     3. COLOUR - HEADINGS (czern brandu, renderowana near-black)
     --------------------------------------------------------------- */
  --head-50:  #f2f2f2;
  --head-100: #dcdcdc;
  --head-200: #b8b8b8;
  --head-300: #8f8f8f;
  --head-400: #4a4a4a;
  --head-500: #171717;    /* BASE headings + ciemne pasy (top-bar) */
  --head-600: #121212;    /* stopka */
  --head-700: #0e0e0e;
  --head-800: #0a0a0a;
  --head-900: #050505;

  /* ---------------------------------------------------------------
     4. COLOUR - SAND / NEUTRAL (background scale)  anchor 100 = #FFFFFF
        50 = powierzchnie kart, dalej coraz ciemniejsze chlodne szarosci
     --------------------------------------------------------------- */
  --sand-50:  #ffffff;
  --sand-100: #ffffff;    /* BASE background - czysta biel brandu */
  --sand-200: #f5f5f6;
  --sand-300: #e9e9eb;
  --sand-400: #d9d9dc;
  --sand-500: #bdbdc2;
  --sand-600: #8e8e94;
  --sand-700: #5a5a60;
  --sand-800: #27272a;
  --sand-900: #141416;

  /* ---------------------------------------------------------------
     5. COLOUR - ACCENTS
     (nazwy legacy z motywu-wzorca - wartosci przemapowane na brand R24)
     --------------------------------------------------------------- */
  --champagne:      #ff5f57;   /* cieply akcent na ciemnym tle (ikony top-bar) */
  --champagne-soft: #ffdedc;   /* jasny wash / focus ring */
  --led-glow:       #ffe4e2;   /* delikatna poswiata akcentu */
  --led-glow-core:  #fff6f5;
  --link:           #d31212;   /* czerwien linkow - AA na bieli (4.9:1) */
  --link-hover:     #a40d0f;

  /* ---------------------------------------------------------------
     6. COLOUR - LIGHT TEMPERATURE (legacy, nieuzywane w R24)
     --------------------------------------------------------------- */
  --temp-3000k: #FFD9A6;
  --temp-4500k: #FFF4E8;
  --temp-6000k: #EAF1FA;

  /* ---------------------------------------------------------------
     7. COLOUR - STATUS (badge "PROMOCJA!" = zielony jak na live)
     --------------------------------------------------------------- */
  --success:      #43a047;  --success-bg: #eaf6eb;  --success-fg: #1d6b2d;
  --error:        #d32f2f;  --error-bg:   #fdecea;  --error-fg:   #8e1414;
  --warning:      #ce9a2c;  --warning-bg: #faf3e0;  --warning-fg: #7c5c14;
  --info:         #4a6f8c;  --info-bg:    #e9f0f5;  --info-fg:    #2f4a5d;

  /* ---------------------------------------------------------------
     8. SEMANTIC ALIASES
     --------------------------------------------------------------- */
  --bg:            var(--sand-100);
  --bg-elevated:   var(--sand-50);
  --bg-sunken:     var(--sand-200);
  --bg-inverse:    var(--head-500);
  --fg:            var(--text-500);   /* body copy */
  --fg-strong:     var(--head-500);   /* headings */
  --fg-muted:      var(--text-400);
  --fg-on-dark:    #f5f5f5;
  --accent:        var(--brand-500);
  --accent-strong: var(--brand-600);  /* za bialym tekstem */
  --border:        var(--sand-300);
  --border-strong: var(--sand-400);

  /* ---------------------------------------------------------------
     9. TYPOGRAPHY - families
     --------------------------------------------------------------- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale - base 16px, ratio 1.25 (major third) */
  --type-base: 16px;          /* RATIO 1.25 */
  --fs-h1:   3.4rem;    /* 54.4px */
  --fs-h2:   2.441rem;  /* 39.1px */
  --fs-h3:   1.953rem;  /* 31.3px */
  --fs-h4:   1.563rem;  /* 25.0px */
  --fs-h5:   1.25rem;   /* 20.0px */
  --fs-h6:   1.125rem;  /* 18.0px */
  --fs-body-lg: 1.125rem; /* 18px lead paragraph */
  --fs-body:    1rem;     /* 16px */
  --fs-small:   0.875rem; /* 14px */
  --fs-caption: 0.75rem;  /* 12px */
  --fs-button:  0.9375rem;/* 15px */

  /* weights */
  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700;  --fw-black: 900;

  /* line-heights */
  --lh-tight: 1.1;    /* display headings */
  --lh-snug:  1.3;    /* sub headings */
  --lh-body:  1.65;   /* paragraphs */
  --lh-ui:    1.4;    /* compact UI */

  /* letter-spacing */
  --ls-display: -0.025em;  /* duze Archivo - ciasno = nowoczesnie */
  --ls-normal:  0em;
  --ls-eyebrow: 0.18em;    /* uppercase overlines */
  --ls-button:  0.06em;
  --ls-wordmark:0.28em;    /* RATUJESZ24 logotype tracking */

  /* ---------------------------------------------------------------
     10. SPACING - base 4px, 8px rhythm
     --------------------------------------------------------------- */
  --sp-0: 0;        --sp-1: 0.25rem;  /* 4 */   --sp-2: 0.5rem;  /* 8 */
  --sp-3: 0.75rem;  /* 12 */          --sp-4: 1rem;    /* 16 */
  --sp-5: 1.5rem;   /* 24 */          --sp-6: 2rem;    /* 32 */
  --sp-7: 2.5rem;   /* 40 */          --sp-8: 3rem;    /* 48 */
  --sp-9: 4rem;     /* 64 */          --sp-10: 5rem;   /* 80 */
  --sp-11: 6rem;    /* 96 */          --sp-12: 8rem;   /* 128 */

  /* ---------------------------------------------------------------
     11. RADII
     --------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;   /* pigulki przyciskow jak na live */
  --radius-circle: 50%;

  /* ---------------------------------------------------------------
     12. ELEVATION / SHADOWS  (neutralne, chlodne; akcent = czerwona
         dyfuzja pod przyciskami primary)
     --------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.05);
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.04), 0 3px 10px rgba(17,17,17,0.06);
  --shadow-md: 0 2px 4px rgba(17,17,17,0.05), 0 10px 26px -6px rgba(17,17,17,0.11);
  --shadow-lg: 0 4px 8px rgba(17,17,17,0.05), 0 22px 48px -12px rgba(17,17,17,0.16);
  --shadow-xl: 0 8px 16px rgba(17,17,17,0.06), 0 36px 80px -16px rgba(17,17,17,0.2);
  /* GLOW - czerwona poswiata akcentow (CTA, badge) */
  --glow-sm: 0 10px 24px -10px rgba(255,35,35,0.45);
  --glow-md: 0 16px 36px -12px rgba(255,35,35,0.5);
  --glow-lg: 0 24px 60px -16px rgba(255,35,35,0.55);

  /* ---------------------------------------------------------------
     13. LAYOUT
     --------------------------------------------------------------- */
  --container: 1440px;
  --container-narrow: 760px;
  --gutter: var(--sp-5);
  /* Breakpoints (mobile-first) - for reference / JS:
     sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */
  --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;
  --bp-xl: 1280px; --bp-2xl: 1536px;

  /* ---------------------------------------------------------------
     14. MOTION  (zdecydowany, ale spokojny)
     --------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ===================================================================
   BASE / SEMANTIC ELEMENT STYLES
   =================================================================== */
.r24-type { color: var(--fg); font-family: var(--font-body); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }

p  { font-family: var(--font-body); font-size: var(--fs-body);
     line-height: var(--lh-body); color: var(--fg); margin: 0 0 1em;
     text-wrap: pretty; }
.lead   { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-600); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-ui); }
.caption{ font-size: var(--fs-caption); line-height: var(--lh-ui);
          color: var(--fg-muted); letter-spacing: 0.02em; }

/* eyebrow / overline - uppercase, szeroko trackowany */
.eyebrow {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--brand-600);
}

a, .link {
  color: var(--link); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover, .link:hover { color: var(--link-hover);
  border-bottom-color: var(--link-hover); }

.btn-label {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-button); letter-spacing: var(--ls-button);
  text-transform: uppercase;
}