/*
  Kindent — design tokeny
  Zdroj barev/fontu: kindent-sitemapa.md (fixní brand, neměnit bez odsouhlasení).
  --color-cta-* je jediná odvozená (ne přímo zadaná) barva — viz komentář níže.
*/

:root {
  /* --- Brand barvy (dané) --- */
  --color-turquoise: #7ab8b6;   /* primární — akcenty, badge, logo */
  --color-brown: #e1ad80;       /* sekundární — teplé hover stavy, drobné akcenty */
  --color-offwhite: #fbf9f4;    /* základní pozadí */
  --color-grey: #58595b;        /* text, neutrální prvky */

  /* --- Odvozené neutrální odstíny (pro hloubku, ne nové "barvy") --- */
  --color-ink: #23272a;         /* téměř černá — CTA tlačítka, nejtmavší text */
  --color-ink-soft: #3a3f42;    /* hover stav tmavých ploch */
  --color-turquoise-deep: #4f918f; /* tmavší tyrkys — hover na tyrkysových prvcích */
  --color-turquoise-text: #2f5f5d; /* tyrkys bezpečný jako TEXT na offwhite (6.8:1) — --color-turquoise
                                       samotné má na offwhite jen ~2:1, na malé písmo nestačí */
  --color-border: #e7e2d6;      /* jemné dělicí linky na offwhite podkladu */
  --color-surface: #ffffff;     /* karty na offwhite pozadí */

  /*
    Poznámka ke kontrastu: bílý text na --color-turquoise (#7ab8b6) má jen ~2.2:1,
    to neprojde WCAG AA. Proto: plné CTA knoflíky = --color-ink pozadí + bílý text
    (~15:1, bezpečné), tyrkys/hnědá se používají na plochy, badge a hover, vždy
    s tmavým textem (--color-ink / --color-grey) nahoře, ne bílým.
  */
  --color-cta-bg: var(--color-ink);
  --color-cta-bg-hover: var(--color-ink-soft);
  --color-cta-text: #ffffff;

  /* --- Sekce: stejná paleta pro obě, liší se jen badge popiskem, ne barvou --- */
  --color-section-hygiena: var(--color-turquoise);
  --color-section-ordinace: var(--color-brown);

  /* --- Typografie --- */
  --font-base: "Poppins", "Segoe UI", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-body: 1rem;                          /* 16px */
  --fs-small: 0.875rem;                     /* 14px */
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --lh-body: 1.65;
  --lh-heading: 1.2;

  /* --- Spacing (8px rytmus) --- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */

  /* --- Rádiusy, stíny --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(35, 39, 42, 0.06);
  --shadow-md: 0 12px 32px rgba(35, 39, 42, 0.10);
  --shadow-lg: 0 24px 64px rgba(35, 39, 42, 0.14);

  /* --- Layout --- */
  --container-max: 1180px;
  --container-pad: var(--space-2);

  /* --- Pohyb --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 450ms;

  /* --- Z-index škála --- */
  --z-header: 100;
  --z-overlay: 500;
  --z-cookie: 1000;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-4);
  }
}