/* ============================================================
   Basko Clean — Colors & Type
   Professional B2B cleaning, Szczecin (PL)
   Source: Relume export (baskoclean.szczecin.pl)
   ============================================================ */

/* ----------  FONTS  ---------- */
/* Local @font-face (Barlow, DM Sans) zastąpione Google Fonts w index.html */
/*
@font-face { font-family: "Barlow"; font-weight: 400; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; src: url("fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; src: url("fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; src: url("fonts/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; src: url("fonts/dm-sans-600.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; src: url("fonts/dm-sans-700.woff2") format("woff2"); }
*/

:root {
  /* ----------  NEUTRAL SCALE  (shade-0 darkest naming follows source) ---------- */
  --color-white: #ffffff;
  --neutral-lightest: #f2f2f2;
  --neutral-lighter: #d9d9d9;
  --neutral-light: #b3b4b4;
  --neutral: #818283;
  --neutral-dark: #4f5052;
  --neutral-darker: #1d1e20;
  --neutral-darkest: #040608;

  /* ----------  CLOUD BURST  (primary navy — brand color) ---------- */
  --cloud-burst-lightest: #e8e9ec;
  --cloud-burst-lighter: #d1d4da;
  --cloud-burst-light: #5f6980;
  --cloud-burst: #1b2a4a;        /* PRIMARY */
  --cloud-burst-dark: #15213b;   /* primary hover */
  --cloud-burst-darker: #0a101d;
  --cloud-burst-darkest: #080c16;

  /* ----------  DAWN PINK  (cream accent) ---------- */
  --dawn-pink-lightest: #fefdfc;
  --dawn-pink-lighter: #fdfcfa;
  --dawn-pink-light: #f8f4ee;
  --dawn-pink: #f5f0e8;          /* CREAM ACCENT */
  --dawn-pink-dark: #c4c0b9;
  --dawn-pink-darker: #62605c;
  --dawn-pink-darkest: #494845;

  /* ----------  WEDGEWOOD  (steel blue secondary) ---------- */
  --wedgewood-lightest: #ecf2f6;
  --wedgewood-lighter: #dae5ed;
  --wedgewood-light: #80a5c0;
  --wedgewood: #4a7fa5;          /* STEEL BLUE */
  --wedgewood-dark: #3b6584;
  --wedgewood-darker: #1d3242;
  --wedgewood-darkest: #162631;

  /* ----------  ALPHA OVERLAYS  ---------- */
  --black-5: color-mix(in srgb, var(--neutral-darkest), transparent 95%);
  --black-10: color-mix(in srgb, var(--neutral-darkest), transparent 90%);
  --black-15: color-mix(in srgb, var(--neutral-darkest), transparent 85%);
  --black-20: color-mix(in srgb, var(--neutral-darkest), transparent 80%);
  --black-60: color-mix(in srgb, var(--neutral-darkest), transparent 40%);
  --white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --white-20: color-mix(in srgb, var(--color-white), transparent 80%);

  /* ----------  CYAN ACCENT  ---------- */
  --cyan: #233562;
  --cyan-dark: #1a2849;
  --cyan-light: #e8ecf4;

  /* ----------  DARK-THEME BRAND TOKENS  (single source of truth) ----------
     The live site renders on a deep indigo base with a periwinkle accent.
     JS/SVG mirror these in ui.jsx (window.BC_ACCENT / BC_ACCENT_INK) because
     SVG presentation attributes (fill=, stroke=) can't resolve var(). */
  --navy-900: #0b1138;     /* page base — granat */
  --accent-blue: #8fa8ff;  /* periwinkle accent — ON DARK (8.0:1 on navy) */
  --accent-ink: #4a6fd0;   /* accent ON LIGHT surfaces — AA on white (4.7:1) */

  /* ----------  SEMANTIC FOREGROUNDS  ---------- */
  --fg1: var(--neutral-darkest);          /* primary text on light */
  --fg2: var(--neutral-dark);             /* secondary / muted text */
  --fg3: #6b6c6e;                         /* tertiary / captions — darkened for AA (4.6:1 on white) */
  --accent: var(--cloud-burst);           /* brand accent / primary action */
  --accent-hover: var(--cloud-burst-dark);
  --bg1: var(--color-white);              /* base page surface (Scheme 1) */
  --bg2: var(--neutral-darkest);          /* dark surface (Scheme 2) */
  --bg3: var(--neutral-darker);           /* dark surface alt (Scheme 3) */
  --surface-cream: var(--dawn-pink);      /* warm section / panel */
  --border1: var(--black-15);             /* hairline on light */
  --border-dark: var(--white-20);         /* hairline on dark */

  /* ----------  TYPE FAMILIES  ---------- */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --weight-heading: 700;
  --weight-heading-bold: 800;
  --weight-body: 400;
  --weight-semibold: 600;

  /* ----------  TYPE SCALE — PŁYNNA (fluid) ----------
     clamp(min_na_telefonie, skala_vw, max_na_desktopie).
     Dzięki temu WSZYSTKO skaluje się z szerokością ekranu — automatycznie
     dopasowuje się do każdego telefonu (wąskiego i szerokiego) bez skoków. */
  --h1: clamp(1.55rem, 6.2vw, 4.5rem);    /* tel ~25px → desktop 72px */
  --h2: clamp(1.35rem, 5.2vw, 3.25rem);   /* tel ~22px → 52px */
  --h3: clamp(1.15rem, 4.2vw, 2.75rem);   /* tel ~18px → 44px */
  --h4: clamp(1.05rem, 3.4vw, 2.25rem);   /* → 36px */
  --h5: clamp(1rem, 2.8vw, 1.75rem);      /* → 28px */
  --h6: clamp(0.95rem, 2.4vw, 1.375rem);  /* → 22px */
  --text-large: clamp(0.95rem, 2.6vw, 1.375rem);
  --text-medium: clamp(0.9rem, 2.3vw, 1.125rem);
  --text-regular: clamp(0.9rem, 2.1vw, 1rem);
  --text-small: clamp(0.8rem, 1.9vw, 0.875rem);
  --text-tiny: clamp(0.7rem, 1.7vw, 0.75rem);

  --leading-heading: 1.2;
  --leading-body: 1.5;
  --tracking-heading: -0.02em;

  /* ----------  RADII  ---------- */
  --radius-button: 6px;
  --radius-card: 8px;
  --radius-badge: 6px;
  --radius-tag: 4px;
  --radius-input: 6px;
  --radius-image: 8px;
  --radius-checkbox: 2px;

  /* ----------  SPACING (section rhythm) — PŁYNNA  ---------- */
  --section-pad-y: clamp(2rem, 7vw, 7rem);       /* niższe sekcje na telefonie */
  --section-pad-x: clamp(30px, 9vw, 84px);        /* równy, wyraźny margines z boków — węższe kafelki na telefonie */
  --container-max: 80rem;    /* 1280px */
  --gap-card: clamp(1rem, 3vw, 2rem);
}

/* Skala typografii i odstępów jest teraz PŁYNNA (clamp/vw w :root powyżej),
   więc dopasowuje się do każdej szerokości ekranu automatycznie — nie ma tu
   już skokowych nadpisań, które psuły efekt na telefonie. Media queries dla
   UKŁADU (liczba kolumn w gridach) zostają w index.html. */

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply on a page that links this stylesheet.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-regular);
  line-height: var(--leading-body);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

/* Headings on this brand are frequently set bold (700) for hero/section titles */
.display-bold { font-weight: var(--weight-heading-bold); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cloud-burst);
  margin: 0;
}

.text-large  { font-size: var(--text-large);  line-height: var(--leading-body); }
.text-medium { font-size: var(--text-medium); line-height: var(--leading-body); }
.text-small  { font-size: var(--text-small);  line-height: var(--leading-body); }
.text-tiny   { font-size: var(--text-tiny);   line-height: var(--leading-body); }

/* ----------  COLOR SCHEMES (section-level) ---------- */
.scheme-1 {
  --scheme-bg: var(--color-white);
  --scheme-text: var(--neutral-darkest);
  --scheme-border: var(--black-15);
  --scheme-accent: var(--cloud-burst);
  background: var(--scheme-bg);
  color: var(--scheme-text);
}
.scheme-2 {
  --scheme-bg: var(--neutral-darkest);
  --scheme-text: var(--color-white);
  --scheme-border: var(--white-20);
  --scheme-accent: var(--color-white);
  background: var(--scheme-bg);
  color: var(--scheme-text);
}
.scheme-3 {
  --scheme-bg: var(--neutral-darker);
  --scheme-text: var(--color-white);
  --scheme-border: var(--white-20);
  --scheme-accent: var(--color-white);
  background: var(--scheme-bg);
  color: var(--scheme-text);
}

/* ============================================================
   MOBILE — kompaktowa skala telefonu (≤600px).
   Desktop/tablet (>600px) BEZ ZMIAN. Mniejsze nagłówki i tekst
   (mocno kompaktowo), WIĘKSZY rytm między sekcjami (więcej powietrza)
   i równy margines z boków. Inspiracja: zwarta apka mobilna.
   ============================================================ */
@media (max-width: 600px) {
  :root {
    /* STAŁE, MAŁE rozmiary (bez vw!) — inaczej na telefonie aktywna była
       część vw i nic realnie się nie zmniejszało. Teraz mocno kompaktowo. */
    /* Czcionki podbite ~15% dla czytelności (elementy/paddingi bez zmian).
       Uwaga: pod zoom:0.5 nadal wychodzą kompaktowo, ale wyraźniej widoczne. */
    --h1: 1.62rem;
    --h2: 1.32rem;
    --h3: 1.16rem;
    --h4: 1.06rem;
    --h5: 1.0rem;
    --h6: 0.92rem;

    --text-large:   1.02rem;
    --text-medium:  0.94rem;
    --text-regular: 0.9rem;
    --text-small:   0.82rem;
    --text-tiny:    0.74rem;

    --leading-heading: 1.15;

    /* Rytm między sekcjami zachowany, ale zwarcie; równy margines z boków.
       UWAGA: .bc-zoom-wrap ma zoom:0.5, więc te wartości są WIDZIANE o połowę mniejsze.
       Dlatego pad-x jest podwojony (~52px → realne ~26px z każdej strony), żeby treść
       NIE dociskała do krawędzi ekranu i miała wyraźny margines. */
    --section-pad-y: 3.4rem;   /* realnie ~27px na sekcję */
    --section-pad-x: 52px;     /* realnie ~26px margines boczny */
    --gap-card: 1.4rem;
  }

  /* ============================================================
     CAŁA TREŚĆ STRONY POMNIEJSZONA O 50% NA TELEFONIE.
     Obejmuje wszystko: teksty, karty, zdjęcia, chmury, bąbelki —
     każdy element w środku maleje o połowę i przelicza układ (zoom).
     WYJĄTEK: navbar i menu (poza .bc-zoom-wrap) — bez zmian.
     ============================================================ */
  .bc-zoom-wrap { zoom: 0.5; }
}
@media (max-width: 400px) {
  :root {
    --h1: 1.5rem;
    --h2: 1.24rem;
    --text-medium: 0.9rem;
    --section-pad-x: 44px;   /* realnie ~22px margines boczny (zoom 0.5) */
  }
}