/* =====================================================================
   CEZiU „Kopernik" — Design tokens
   Jedyne miejsce, w którym definiujemy kolory, typografię i przestrzenie.
   Zmiana marki = zmiana tego pliku.
   ===================================================================== */

:root {
  /* --- Marka: bordo ------------------------------------------------ */
  --color-primary: #72001f;
  --color-primary-dark: #4d0015;
  --color-primary-light: #92002a;
  --color-primary-soft: #fbf3f4;
  --color-primary-contrast: #ffffff;

  /* --- Akcent: ciepłe złoto (tylko detal) --------------------------- */
  --color-gold: #c99a3d;
  --color-gold-light: #e4c884;
  --color-gold-dark: #a67c26;
  --color-gold-soft: #faf5ea;

  /* --- Tła ---------------------------------------------------------- */
  --color-background: #ffffff;
  --color-background-alt: #f6f6f4;
  --color-background-deep: #efeeeb;

  /* --- Typografia --------------------------------------------------- */
  --color-text: #252525;
  --color-text-strong: #141414;
  --color-text-muted: #696969;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.72);

  /* --- Linie -------------------------------------------------------- */
  --color-border: #e6e3df;
  --color-border-strong: #d3cfc9;
  --color-border-inverse: rgba(255, 255, 255, 0.16);

  /* --- Stany -------------------------------------------------------- */
  --color-focus: #1b6ac9;
  --color-success: #2f6f4e;
  --color-danger: #a3241f;

  /* --- Kategorie aktualności (zgaszone, nie krzyczą) ---------------- */
  --color-tag-wydarzenia: #7a5aa6;
  --color-tag-sukcesy: #a67c26;
  --color-tag-projekty: #2f6f8f;
  --color-tag-sport: #2f6f4e;
  --color-tag-ogloszenia: #8a5a3c;

  /* --- Rodziny fontów ---------------------------------------------- */
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* --- Skala typograficzna (desktop; skalowana w responsive.css) ---- */
  --fs-h1: clamp(2.25rem, 1.4rem + 2.4vw, 4rem);       /* 36 → 64 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);   /* 28 → 42 */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);   /* 20 → 28 */
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.1875rem;   /* poprzednio 1.125rem — do wycofania, gdyby nie przypadło do gustu */
  --fs-body: 1.0625rem;      /* poprzednio 1rem */
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.14;
  --lh-heading: 1.24;
  --lh-body: 1.68;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* --- Przestrzeń (skala 4 px) ------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* Pionowy rytm sekcji — jeden token, zmieniasz raz dla całej witryny */
  --section-padding: clamp(3.5rem, 2rem + 4vw, 6.5rem);
  --section-padding-tight: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);

  /* --- Siatka ------------------------------------------------------- */
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-gutter: clamp(1.25rem, 0.5rem + 2vw, 3rem);
  --grid-gap: clamp(1.25rem, 0.8rem + 1vw, 2rem);

  /* --- Promienie ---------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Cienie (delikatne, „papierowe") ------------------------------ */
  --shadow-xs: 0 1px 2px rgba(37, 37, 37, 0.04);
  --shadow-sm: 0 2px 8px rgba(37, 37, 37, 0.05);
  --shadow-md: 0 8px 24px rgba(37, 37, 37, 0.07);
  --shadow-lg: 0 18px 48px rgba(37, 37, 37, 0.11);
  --shadow-menu: 0 24px 60px rgba(20, 8, 12, 0.16);

  /* --- Ruch --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 350ms;
  --dur-crossfade: 900ms;

  /* --- Warstwy ------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-megamenu: 300;
  --z-drawer: 400;
  --z-overlay: 500;
  --z-toast: 600;

  /* --- Ustawienia sterowane panelem dostępności --------------------- */
  --a11y-font-scale: 1;
  --a11y-line-height: var(--lh-body);
}

/* =====================================================================
   Tryb wysokiego kontrastu — panel „Dostosowanie strony"
   ===================================================================== */
html[data-contrast="high"] {
  --color-primary: #4d0015;
  --color-primary-light: #4d0015;
  --color-primary-dark: #2c000c;
  --color-gold: #6d4f0d;
  --color-gold-dark: #543c05;
  --color-background: #ffffff;
  --color-background-alt: #ffffff;
  --color-background-deep: #f2f2f2;
  --color-text: #000000;
  --color-text-strong: #000000;
  --color-text-muted: #303030;
  --color-text-inverse-muted: #ffffff;
  --color-border: #000000;
  --color-border-strong: #000000;
  --color-border-inverse: rgba(255, 255, 255, 0.6);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-menu: 0 0 0 2px #000000;
}