/* ==========================================================================
   Cadelie — tokeny marki. JEDYNY plik, w którym żyje marka.
   Motyw-baza (cadelie-base) jest bezmarkowy i czyta wyłącznie te zmienne.
   Zmiana koloru czy fontu = zmiana tutaj, nigdzie indziej.
   ========================================================================== */
:root {
  /* --- Kolory ---------------------------------------------------------- */
  --c-bialy:            #FFFFFF;   /* tło dominujące, ~85% powierzchni      */
  --c-bez:              #F6F1E9;   /* jedna sekcja wyróżniona na stronę     */
  --c-marka:            #3D1700;   /* jedyny ciemny kolor marki             */
  --c-marka-hover:      #55240B;
  --c-marka-active:     #2B1000;
  --c-tekst:            #4A3B33;   /* 10,7:1 na bieli                       */
  --c-tekst-wyciszony:  #7A6A5E;   /* 5,2:1 na bieli                        */
  --c-linia:            #E8E2DC;
  --c-cyfra-widmo:      #EFE0D5;   /* wyłącznie cyfry w tle sekcji procesu  */
  --c-tlo-techniczne:   #1C1712;   /* wyłącznie wnętrze kafli z renderami   */

  /* --- Typografia ------------------------------------------------------ */
  --font-naglowek: "Fraunces", Georgia, serif;
  --font-tekst:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: 2.125rem;  /* 34px mobile */
  --fs-h2: 1.75rem;   /* 28px */
  --fs-h3: 1.125rem;  /* 18px */
  --fs-tekst: 1rem;   /* 16px */
  --fs-drobny: 0.875rem;
  --fs-etykieta: 0.75rem;

  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-tekst: 1.65;

  /* --- Skala odstępów (8px) -------------------------------------------- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-6: 3rem;    --s-8: 4rem;   --s-12: 6rem;   --s-16: 8rem;

  --sekcja-odstep: var(--s-12);      /* 96px na mobile */
  --margines-boczny: var(--s-3);     /* 24px */
  --max-tresc: 75rem;                /* 1200px */

  /* --- Zaokrąglenia (świadomie różne) ---------------------------------- */
  --r-przycisk: 8px;
  --r-karta: 12px;
  --r-kafel: 4px;
  --r-pole: 6px;
  --r-kolo: 50%;
}

@media (min-width: 64rem) {
  :root {
    --fs-h1: 3.5rem;    /* 56px desktop */
    --fs-h2: 2.5rem;    /* 40px */
    --fs-h3: 1.5rem;    /* 24px */
    --fs-tekst: 1.0625rem;
    --lh-h1: 1.1;
    --lh-tekst: 1.7;
    --sekcja-odstep: var(--s-16);   /* 128px */
    --margines-boczny: var(--s-4);
  }
}