/*
 * Wygląd serwisu w jednym miejscu: kolory, kroje i skala pisma, odstępy, warstwy, ruch.
 * Pozostałe arkusze używają wyłącznie tych zmiennych — strażnik odrzuca kolor
 * (także mieszany przez color-mix), krój, rozmiar i grubość pisma oraz warstwę
 * wpisane gdziekolwiek indziej.
 *
 * Progi szerokości ekranu (zmienna CSS nie działa w @media, więc wolno użyć tylko tych):
 *   telefon:  @media (max-width: 40rem)
 *   tablet:   @media (max-width: 64rem)
 */

:root {
  /* Papier i tusz */
  --color-paper: #F6F1EB;
  --color-paper-warm: #F0E8DF;
  --color-paper-light: #FBF8F4;
  --color-ink: #2A2522;
  /* Tekst drugoplanowy: kontrast co najmniej 4,5 : 1 na każdym papierze */
  --color-ink-soft: #6B6158;
  /* Wyłącznie ozdobniki, linie i obrysy — nigdy tekst (kontrast 2,3 : 1) */
  --color-ink-faint: #A89E94;
  /* Czerwień pieczęci. Odcień przyciemniony o włos względem dawnego #B8423A,
     żeby czerwony tekst miał 4,5 : 1 także na ciepłym papierze */
  --color-accent: #B44139;
  --color-success: #4A714A;

  /* Noc — ciemne sekcje wykładów i nakładka podglądu zdjęć */
  --color-night: #1F1B19;
  --color-night-2: #2A2522;
  --color-night-3: #38312C;
  --color-night-ink: #EDE5DA;
  --color-night-soft: #A89E94;
  --color-lamp: #E8C27A;

  /* Odcienie pochodne — przezroczystość liczona z kolorów wyżej */
  --color-line: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --color-line-strong: color-mix(in srgb, var(--color-ink) 24%, transparent);
  --color-field-border: color-mix(in srgb, var(--color-ink) 55%, transparent);  /* obrys pola: 3 : 1 */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --color-accent-wash: color-mix(in srgb, var(--color-accent) 3%, transparent);
  --color-backdrop: color-mix(in srgb, var(--color-ink) 40%, transparent);
  --color-backdrop-deep: color-mix(in srgb, var(--color-ink) 92%, transparent);
  --color-night-line: color-mix(in srgb, var(--color-paper) 12%, transparent);
  /* Jasny pierścień w czerwonej pieczęci */
  --color-seal-ring: color-mix(in srgb, var(--color-paper) 50%, transparent);

  /* Kroje */
  --font-serif: 'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;
  /* Krój interfejsu: etykiety, przyciski, pola, drobny tekst (w panelu szeryfowy — niżej) */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-jp: 'Noto Serif JP', 'Cormorant Garamond', serif;
  --font-stone: 'Cinzel', 'Cormorant Garamond', Georgia, serif;

  /* Skala pisma. Najmniejszy stopień to 14 px (strażnik pilnuje progu).
     Cormorant Garamond wygląda na mniejszy niż inne kroje w tym samym stopniu,
     więc tekst ciągły tym krojem ma co najmniej 18 px. */
  --fs-label: 0.875rem;      /* 14 px — etykiety wersalikami (Inter), pasek, przyciski, tagi */
  --fs-small: 1rem;          /* 16 px — drobny tekst krojem bezszeryfowym, pola formularzy */
  --fs-body: 1.125rem;       /* 18 px — tekst ciągły krojem szeryfowym */
  --fs-lead: 1.25rem;        /* 20 px — wyróżniony akapit, podpis pod zdjęciem */
  --fs-title-sm: 1.5rem;     /* 24 px — nazwy pozycji listy */
  --fs-title: 1.875rem;      /* 30 px — tytuł okna i sekcji */
  --fs-display-sm: clamp(2.25rem, 5vw, 3.5rem);
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  /* Tytuł strony na telefonie: „pomidorium” w rozstrzelonym kroju mieści się na ekranie od 320 px */
  --fs-display-phone: clamp(2.25rem, 11.5vw, var(--fs-display));
  /* Tytuł w oknie ramki ze strony głównej (galeria, kontakt, wykłady): rośnie z oknem, na wąskim telefonie mieści się bez łamania */
  --fs-frame-title: clamp(1.75rem, 11cqi, 4rem);

  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.9;

  --weight-light: 300;       /* tylko tytuły w stopniu --fs-title i większym */
  --weight-regular: 400;
  --weight-medium: 500;

  --tracking-label: 0.14em;
  --tracking-wide: 0.3em;
  --tracking-airy: 0.45em;
  --tracking-display: 0.35em;
  --tracking-display-narrow: 0.18em;

  /* Odstępy */
  --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: 6rem;

  /* Wymiary */
  --width-text: 42.5rem;
  --width-dialog: 40rem;
  --width-wide: 75rem;
  --topbar-height: 3rem;
  --touch-target: 2.75rem;   /* 44 px — najmniejszy cel dotyku */
  --line-width: 1px;
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 3px;

  /* Warstwy */
  --z-base: 0;               /* tło strony (poświata) pod treścią */
  --z-content: 1;
  --z-ornament: 10;
  --z-topbar: 200;
  --z-action-status: 300;    /* komunikat o wyniku akcji nad paskiem i nakładkami */
  --z-dialog: 1000;

  /* Ruch (choreografia wejścia stron ma własne opóźnienia w arkuszach stref) */
  --dur-fast: 0.3s;
  --dur-medium: 0.6s;
  --dur-slow: 1.2s;
  --ease-stamp: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Strefa: galeria publiczna === */
  --gallery-filter-width: 50rem;     /* pasek tagów w dwóch–trzech wierszach na komputerze */
  --gallery-cell: 17.5rem;           /* najwęższa kolumna siatki: trzy kolumny na komputerze, dwie na iPadzie */
  --gallery-cell-phone: 10rem;       /* telefon: dwie kolumny od 360 px */
  --photo-mat: var(--space-5);       /* passe-partout wokół ramki i odstęp ramki od pracy w podglądzie */
  /* Praca z passe-partout i ramką (4 × --photo-mat) mieści się między marginesami okna (--space-10) */
  --photo-max-width: min(70vw, 100vw - 2 * var(--space-10) - 4 * var(--photo-mat));
  --photo-max-height: 65dvh;
  --photo-max-width-phone: calc(100vw - 2 * var(--space-3) - 2 * var(--photo-mat));
  --photo-max-height-phone: 50dvh;   /* pod pracą mieszczą się jeszcze opis i strzałki */

  /* === Strefa: panel administracyjny === */
  --panel-width: 78rem;              /* boczne menu i lista prac: miniatura, opis i przyciski w jednym wierszu */
  --panel-side-width: clamp(10rem, 18vw, 14rem);  /* boczne menu: około jednej piątej iPada */
  --panel-dialog-wide: 64rem;        /* okno opisu pracy: zdjęcie obok formularza */
  --panel-thumb: 4.5rem;             /* miniatura w wierszu listy */
  --z-panel-raised: 20;              /* przeciągany wiersz nad sąsiadami */
  --z-panel-drop: 250;               /* nakładka „Upuść zdjęcia” nad paskiem strony */
  --color-panel-drop: color-mix(in srgb, var(--color-paper-light) 88%, transparent);  /* tło nakładki: strona prześwituje */

  /* === Strefa: wykłady === */

  /* Czerwień pieczęci na nocy (ciemne sekcje, werdykty, powiększenie): 4,8 : 1 na tuszu i nocy */
  --color-night-accent: #D7766B;
  /* Barwy ziemi do map, kalendarzy i osi czasu — dobrane do papieru i czerwieni pieczęci */
  --color-lecture-slate: #50627A;
  --color-lecture-ochre: #B08646;
  --color-lecture-sage: #6B7A5E;
  --color-lecture-plum: #7B6080;
  --color-lecture-wine: #7A2D28;
  --color-lecture-rose: #CC8578;
  --color-lecture-umber: #6E5B4B;
  /* Kamień z inskrypcją */
  --color-stone-light: #F1ECE4;
  --color-stone: #DDD5C9;
  --color-stone-dark: #CFC5B6;
  --color-stone-edge: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --color-stone-shade: color-mix(in srgb, var(--color-ink-soft) 22%, transparent);
  --color-stone-highlight: color-mix(in srgb, var(--color-paper-light) 55%, transparent);
  --color-stone-cut: color-mix(in srgb, var(--color-ink) 18%, transparent);
  --color-chapbar: color-mix(in srgb, var(--color-paper) 94%, transparent);
  --color-zoom-badge: color-mix(in srgb, var(--color-paper) 92%, transparent);
  --color-lightbox-button: color-mix(in srgb, var(--color-night) 75%, transparent);
  --color-accent-ring: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --color-night-accent-soft: color-mix(in srgb, var(--color-night-accent) 15%, transparent);
  /* Welony nad obrazami i rysunkami modułów */
  --color-paper-veil: color-mix(in srgb, var(--color-paper-light) 75%, transparent);
  --color-paper-mist: color-mix(in srgb, var(--color-paper-light) 80%, transparent);
  --color-paper-haze: color-mix(in srgb, var(--color-paper-light) 40%, transparent);
  --color-ink-veil: color-mix(in srgb, var(--color-ink) 60%, transparent);
  --color-night-veil: color-mix(in srgb, var(--color-night) 85%, transparent);
  --color-candlelight: color-mix(in srgb, var(--color-lamp) 28%, transparent);
  /* Mapa Rzymu */
  --color-map-grain: color-mix(in srgb, var(--color-ink) 7%, transparent);
  --color-map-wall: color-mix(in srgb, var(--color-lecture-slate) 5%, transparent);
  /* Noc Lemuriów i lampka w katakumbach */
  --color-bean-light: #4B4140;
  --color-bean-dark: #0D0B0A;
  --color-ghost: color-mix(in srgb, var(--color-night-ink) 60%, transparent);
  --color-ghost-faint: color-mix(in srgb, var(--color-night-ink) 16%, transparent);
  --color-ghost-eye: color-mix(in srgb, var(--color-night) 55%, transparent);
  --color-lamp-dark: #000000;
  --color-lamp-dim: color-mix(in srgb, var(--color-lamp-dark) 25%, transparent);
  --color-lamp-shadow: color-mix(in srgb, #080605 96%, transparent);
  --color-lamp-glow: color-mix(in srgb, var(--color-lamp) 18%, transparent);
  --color-flame-core: #FFF6C8;
  --color-flame: #FFB43C;
  /* Szyba zamkniętego okna, drewno i skóra rzeźby w przekroju */
  --color-glass-light: color-mix(in srgb, var(--color-paper-warm) 94%, transparent);
  --color-glass-dark: color-mix(in srgb, #D6CDC2 94%, transparent);
  --color-wood: #E7D6BC;
  --color-skin: #B98A6A;
  --color-skin-paint: #C99A7E;

  --weight-semibold: 600;    /* pogrubienia w tekście wykładu */

  --fs-lecture-h4: 1.4rem;
  --fs-lecture-toc-number: 1.6rem;
  --fs-lecture-question: 1.75rem;
  --fs-lecture-quote: 1.8rem;
  --fs-lecture-title: 2.1rem;
  --fs-lecture-verdict: 2.3rem;
  --fs-lecture-glyph: 2.6rem;
  --fs-lecture-initial-sm: 3.8rem;
  --fs-lecture-initial: 4.5rem;
  --fs-lecture-score: 4.6rem;
  --fs-lecture-lead: clamp(1.5rem, 2.4vw, 1.625rem);
  --fs-lecture-hero-lead: clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-lecture-stone: clamp(1.1rem, 2.4vw, 1.75rem);
  --fs-lecture-verbs: clamp(1.4rem, 3vw, 2rem);
  --fs-lecture-h3: clamp(1.65rem, 2.6vw, 2.1rem);
  --fs-lecture-pull: clamp(1.875rem, 3vw, 2.3rem);   /* cienka odmiana — od 30 px */
  --fs-lecture-h2: clamp(2.3rem, 4.6vw, 3.5rem);
  --fs-lecture-finale: clamp(2.6rem, 7vw, 5rem);
  --fs-lecture-number: clamp(3.6rem, 8vw, 6rem);
  --fs-lecture-hero: clamp(3.6rem, 11vw, 7.5rem);

  --z-chapter-bar: 150;      /* pasek rozdziałów pod paskiem strony */
  /* Poprawianie tekstów na stronie wykładu (konto panelu) */
  --z-edit-marks: 140;       /* ramki i ołówki pod paskiem rozdziałów, nad treścią */
  --z-edit-tools: 180;       /* pasek trybu poprawiania i przycisk w rogu nad paskiem rozdziałów */
  --edit-bar-height: 3.5rem;
}

/* Strefa: panel — szeryfy w całym panelu i jego oknach (także narzędzia poprawiania na stronie wykładu),
   w etykietach, przyciskach, polach i menu (decyzja właścicielki); pasek, stopka i elementy wspólne serwisu
   zostają jak na stronie.
   Cormorant Garamond wygląda na mniejszy niż Inter w tym samym stopniu, a wersalikami traci czytelność
   w małym stopniu — stąd większe stopnie interfejsu. */
.panel-zone {
  --font-ui: var(--font-serif);
  --fs-label: 1rem;          /* 16 px — etykiety wersalikami, przyciski, menu */
  --fs-small: 1.125rem;      /* 18 px — pola formularzy, drobny tekst */
}