/**
 * CSS proměnné z theme.json
 * Používejte v klasickém CSS pro konzistenci s blokovým editorem.
 */

:root {
  /* Okraj stránky – vnitřní okraj zleva/zprava, na širokých displayích větší (méně roztažený layout) */
  --mk-page-edge: 5%;

  /* Fonty  */
  --mk-font-heading: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mk-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Barvy – paleta z theme.json + původní mk-clean.cz */
  --color-primary: #0054a6;
  --color-secondary: #212529;
  --color-tertiary: #00a1cd;   /* původní web – vlna, akcenty */
  --color-dark-blue: #183f72;  /* původní web – nadpisy v kartě, kontakt */
  --color-accent: #e6f0fa;
  --color-white: #ffffff;

  /* Aliasy pro kompatibilitu s WP preset (editor je používá) */
  --wp--preset--color--primary: var(--color-primary);
  --wp--preset--color--secondary: var(--color-secondary);
  --wp--preset--color--accent: var(--color-accent);
  --wp--preset--color--white: var(--color-white);

  /* Sémantické barvy (odvozené ze styles v theme.json) */
  --color-background: var(--color-white);
  --color-text: var(--color-secondary);
  --color-link: var(--color-primary);

  /* Velikosti písma – typography z theme.json */
  --font-size-small: 0.875rem;
  --font-size-normal: 1rem;
  --font-size-medium: 1.25rem;
  --font-size-large: 2rem;
  --font-size-huge: 3rem;

  /* Typografie */
  --mk-line-height: 1.65;
  --mk-text-size: 18px;
  --mk-small-text-size: 15px;
  --mk-h1-size: 46px;
  --mk-h2-size: 32px;
  --mk-h3-size: 24px;

  /* Layout (dle PDF) */
  --mk-section-pad-y: 90px;
  --mk-section-pad-y-mobile: 56px;
  --mk-prose-max: 760px;
  --mk-cta-pad-y: 14px;
  --mk-cta-pad-x: 26px;
  --mk-cta-radius: 10px;
  --mk-cta-gap-top: 28px;

  /* Aliasy pro WP preset (editor) */
  --wp--preset--font-size--small: var(--font-size-small);
  --wp--preset--font-size--normal: var(--font-size-normal);
  --wp--preset--font-size--medium: var(--font-size-medium);
  --wp--preset--font-size--large: var(--font-size-large);
  --wp--preset--font-size--huge: var(--font-size-huge);
}

@media (max-width: 782px) {
  :root {
    --mk-text-size: 16px;
    --mk-small-text-size: 14px;
    --mk-h1-size: 30px;
    --mk-h2-size: 24px;
    --mk-h3-size: 20px;
  }
}

/* Širší displaye – větší vnitřní okraje, aby layout nebyl roztažený */
@media (min-width: 1200px) {
  :root {
    --mk-page-edge: 8%;
  }
}
@media (min-width: 1600px) {
  :root {
    --mk-page-edge: 10%;
  }
}
@media (min-width: 1920px) {
  :root {
    --mk-page-edge: 12%;
  }
}
@media (min-width: 2400px) {
  :root {
    --mk-page-edge: 14%;
  }
}