/* =============================================================================
   M&G Estate — tokeny identyfikacji (makieta mgestate-site-v3.1)
   Wersja 2.0 · 2026-09-09 · źródło: 05_Review/05_analiza-mgestate-i-brief-04_WWW_v2.md §2

   To jedyny plik z surowymi wartościami kolorów. site.css używa wyłącznie
   tokenów. Wartości bazowe są przepisane dosłownie z assets/css/site.css makiety.
   Kontrasty (WCAG 2.1) policzone i zmierzone w README §6.
   ========================================================================== */

/* D30: zamiennik odręczny na licencji OFL (assets/fonts/OFL-Caveat.txt) — instancja
   wght 600 fontu zmiennego Caveat, subset latin + latin-ext z cechami domyślnymi
   (calt, kern, liga), 57 KB. Osobna deklaracja bez local(): o kolejności decyduje
   stos --script, więc plik nie jest pobierany, gdy jest Brush Script MT albo Segoe Script. */
@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caveat-600-latin.woff2") format("woff2");
}

:root {
  /* ---------------------------------------------------------------------------
     1. KROJE — systemowe; jeden krój OFL wyłącznie dla akcentu odręcznego (D30)
     Georgia: nagłówki, lead hero, tytuły kart. Arial: tekst i interfejs.
     Brush Script MT / Segoe Script / Caveat / cursive: akcent odręczny —
     Caveat (@font-face wyżej) stoi w stosie za dwoma krojami systemowymi,
     więc przeglądarka pobiera go tylko tam, gdzie ich nie ma (Android, Linux).
  ---------------------------------------------------------------------------- */
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --script: "Brush Script MT", "Segoe Script", Caveat, cursive;
  --font-display: var(--serif);
  --font-text: var(--sans);
  --fw-regular: 400;
  --fw-medium: 700;     /* Arial nie ma odmiany 500 — wyróżnienie niesie 700 (jak przyciski makiety) */
  --fw-semibold: 600;   /* Georgia: tytuły kart makiety (font-weight: 600) */

  /* ---------------------------------------------------------------------------
     2. PALETA MAKIETY — dosłownie z :root makiety (brief §2)
  ---------------------------------------------------------------------------- */
  --black:  #090909;
  --black2: #11110f;
  --gold:   #caa24e;
  --gold2:  #e2c27b;
  --cream:  #f5f1e9;
  --ink:    #171512;
  --muted:  #777168;
  --line:   #d8cfbf;
  --white:  #ffffff;

  /* Tła sekcji makiety (brief §2) */
  --bg-header: #000000;
  --bg-hero:   #0b0b0a;
  --bg-light:  #f8f5ef;
  --bg-strip:  #f5f1e8;
  --bg-footer: #0b0b0a;
  --about-gradient: linear-gradient(90deg, #0c0c0b, #141310 55%, #0d0c0b);

  /* Przyciski makiety (brief §2) */
  --btn-gold-gradient: linear-gradient(135deg, #e1bd69, #bd9140);
  --btn-gold-border: #e4c474;
  --btn-gold-text: #17120a;
  --btn-outline-bg-dark: rgba(0, 0, 0, 0.22);   /* tło obrysu na tle ciemnym (site.css §2; D1 oceny v5: dawna nazwa --btn-outline-bg tworzyła cykl) */

  /* ---------------------------------------------------------------------------
     3. WARTOŚCI POCHODNE Z MAKIETY (site.css makiety, poza listą §2)
     Dwie, obie z powodu kontrastu przy stopniu 12 px (D26, brief §6.4):
     --muted (#777168) daje 4,44:1 na #f8f5ef — poniżej 4,5:1 dla tekstu;
     --gold (#caa24e) daje 2,39:1 na bieli — poniżej 3:1 dla obramowania
     elementu sterującego. Makieta ma oba kolory ciemniejsze w innych
     miejscach: .eyebrow.dark (#49443c) i strzałka karty (#9d762c).
  ---------------------------------------------------------------------------- */
  --muted-2:   #49443c;   /* tekst drugorzędny na tle jasnym — 8,87:1 na #f8f5ef */
  --gold-deep: #9d762c;   /* obramowanie elementu sterującego na tle jasnym — 3,82:1 na #f8f5ef, 4,15:1 na bieli */

  /* Przezroczystości makiety (linie i cienie) */
  --gold-a18: rgba(202, 162, 78, 0.18);
  --gold-a28: rgba(202, 162, 78, 0.28);
  --gold-a45: rgba(226, 194, 123, 0.45);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a22: rgba(255, 255, 255, 0.22);
  --sh-card: 0 6px 18px rgba(26, 20, 10, 0.07);
  --sh-card-hover: 0 10px 28px rgba(26, 20, 10, 0.11);
  --sh-gold: 0 4px 14px rgba(166, 120, 31, 0.2);
  --hero-shade: linear-gradient(90deg, #090909 0, #090909 27%, rgba(9, 9, 9, 0.88) 34%, rgba(9, 9, 9, 0.08) 60%, rgba(9, 9, 9, 0.08));
  --hero-shade-narrow: linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.70) 45%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.78));   /* makieta: .74 → .25 (45 %) → .72 — wzmocniony, bo H1 i lead stoją na jasnej ścianie i oknie (B1 oceny v5, D30) */
  --hero-photo-shade: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.03) 60%, rgba(0, 0, 0, 0.12));   /* dosłownie z makiety (D8 oceny v5: .05 → .12) */
  --hero-photo-bottom: linear-gradient(0deg, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.62) 112px, rgba(0, 0, 0, 0) 210px);   /* B2: dolny gradient pod podpisami glifów (blok glifów zajmuje 25–111 px od dołu fotografii) */
  --hero-quote-halo: radial-gradient(ellipse 210px 150px at calc(100% - 6.8vw - 117px) 100px, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0));   /* D8: cytat na wysokości makiety (38 px) leży pierwszą linią na cieniu gzymsu — miękkie rozjaśnienie pod czterema wierszami */
  --agent-shade: linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, 0.62) 64%, rgba(0, 0, 0, 0.94));   /* makieta: transparent 45% → .88; wzmocniony — pomiar README §6.3 */

  /* ---------------------------------------------------------------------------
     4. STANY FUNKCJONALNE — spoza makiety (nie ma w niej formularzy)
     Zachowane z 04_WWW: błąd walidacji, błąd serwera, potwierdzenie.
     Kontrasty na tle jasnym: ceglany 5,60:1, zieleń 5,62:1 (tokens 04_WWW).
  ---------------------------------------------------------------------------- */
  --clay-100: #eee3da;
  --clay-300: #cd8472;
  --clay-700: #a04632;
  --green-100: #e1e7de;
  --green-300: #5da486;
  --green-700: #1d6e52;

  /* ---------------------------------------------------------------------------
     5. ROLE SEMANTYCZNE — selektory formularzy, narzędzi i stanów z 04_WWW
     używają tych ról; tu są przypięte do palety makiety.
  ---------------------------------------------------------------------------- */
  --bg-page: var(--bg-light);
  --bg-raised: var(--white);
  --bg-sunken: var(--bg-strip);
  --bg-inverse: var(--bg-hero);
  --bg-inverse-raised: var(--black2);

  --fg: var(--ink);
  --fg-muted: var(--muted-2);
  --fg-on-inverse: var(--cream);
  --fg-muted-on-inverse: var(--line);
  --fg-link: var(--gold-deep);
  --fg-link-on-inverse: var(--gold2);

  --border: var(--line);
  --border-strong: var(--muted);
  --border-inverse: var(--gold-a28);

  --focus-ring: var(--gold-deep);
  --focus-ring-inverse: var(--gold2);

  /* ---------------------------------------------------------------------------
     6. SKALA TYPOGRAFICZNA — stopnie makiety, podniesione do minimum D26
     (12 px etykiety i metadane, 13 px nawigacja, 14–16 px tekst)
  ---------------------------------------------------------------------------- */
  --t-hero:    clamp(56px, 4.1vw, 78px);   /* H1 hero makiety */
  --t-h1:      clamp(38px, 3.2vw, 52px);   /* H1 podstron */
  --t-h2:      31px;                       /* nagłówki sekcji makiety (36 od 1600) */
  --t-h2-about: 29px;
  --t-h3:      20px;                       /* tytuł osoby w nakładce, tytuł karty podstrony */
  --t-h4:      17px;                       /* tytuł karty oferty (19 od 1600) */
  --t-lead:    clamp(16px, 1.05vw, 20px);  /* lead hero (serif) */
  --t-base:    16px;
  --t-sm:      14px;
  --t-nav:     13px;
  --t-xs:      12px;                       /* D26: minimum w serwisie */
  --t-script:  28px;
  --t-script-sm: 20px;

  --lh-hero: 0.88;
  --lh-h1: 1.0;
  --lh-h2: 0.94;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-lead: 1.35;
  --lh-base: 1.55;
  --lh-sm: 1.5;
  --lh-xs: 1.35;

  --ls-hero: -0.03em;
  --ls-h1: -0.02em;
  --ls-eyebrow: 0.36em;
  --ls-label: 0.08em;
  --ls-btn: 0.01em;

  --measure: 68ch;

  /* ---------------------------------------------------------------------------
     7. ODSTĘPY, SIATKA, PROMIENIE, RUCH
  ---------------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-y: 3rem;                 /* 48 poniżej 900 px; 72 od 900 (site.css, D21) */
  --container: 1540px;               /* header-inner makiety */
  --page-x: max(5vw, 50px);          /* margines poziomy sekcji makiety */
  --gutter: 15px;                    /* odstęp siatki kart makiety */
  --header-h: 92px;
  --header-h-narrow: 72px;

  --r-sm: 2px;                       /* przyciski makiety */
  --r-md: 2px;
  --r-lg: 0px;                       /* karty makiety mają narożniki proste */
  --r-pill: 999px;

  --dur-1: 200ms;                    /* przyciski, uniesienie karty (makieta: .2s) */
  --dur-2: 200ms;
  --dur-3: 400ms;                    /* skala zdjęcia karty (makieta: .4s) */
  --ease-std: ease;
  --ease-out: ease-out;

  color-scheme: light;
}

/* Sekcja na ciemnym tle — odwraca role, nie tokeny bazowe. */
.on-inverse {
  --bg-page: var(--bg-hero);
  --bg-raised: var(--black2);
  --bg-sunken: var(--black);
  --fg: var(--cream);
  --fg-muted: var(--line);
  --fg-link: var(--gold2);
  --border: var(--gold-a28);
  --border-strong: var(--gold);
  --focus-ring: var(--gold2);
  background: var(--bg-page);
  color: var(--fg);
}

/* -----------------------------------------------------------------------------
   8. WARSTWA BAZOWA
-------------------------------------------------------------------------------- */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--t-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
.lead { font-size: var(--t-base); line-height: var(--lh-base); color: var(--fg-muted); }
small, .text-sm { font-size: var(--t-sm); line-height: var(--lh-sm); }

/* Etykieta sekcji — wersaliki 12 px, rozstrzelone jak nadtytuł makiety. */
.label, .eyebrow {
  font-size: var(--t-xs);
  line-height: 1.2;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold2);
  margin: 0 0 10px;
}
.eyebrow.dark, .label.dark { color: var(--muted-2); }

/* Liczby: metraż, cena, piętro — cyfry tabelaryczne */
.tabular, table, th, td, .price, .area, input[type="number"], time {
  font-variant-numeric: tabular-nums;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-x); }

section { padding-block: var(--section-y); }

a { color: var(--fg-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }

.status-ok    { color: var(--green-700); background: var(--green-100); }
.status-error { color: var(--clay-700);  background: var(--clay-100); }
.on-inverse .status-ok    { color: var(--green-300); background: transparent; }
.on-inverse .status-error { color: var(--clay-300);  background: transparent; }

/* -----------------------------------------------------------------------------
   9. OGRANICZENIE RUCHU (D28): znikają przejścia, skala i uniesienia
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}