/*
  Tokeny strony. Baza: wariant "Blanco y negro" zatwierdzony 2026-09-26.
  Jak zmienić kolor albo krój: podmień wartość, zapisz, odśwież index.html.
  Marka klienta to czerń i biel; szarości policzone z ich zdjęć z 2021.
  Stare tokeny trzech wariantów: 00_DLA_MAKSA/zasoby/warianty-tokens.css.
*/

:root {
  /* kolor: role */
  --bg: #000000;              /* tło: czerń z logo */
  --ink: #FFFFFF;             /* tekst: biel z logo */
  --muted: #A9A49B;           /* drugorzędny tekst, 8,5:1 na czerni */
  --line: #FFFFFF38;          /* linie i podkreślenia */
  --action: #FFFFFF;          /* przycisk */
  --on-action: #000000;
  --action-hover: #E4E1DB;
  --scrim: #000000B3;         /* przyciemnienie za oknem rezerwacji */
  --scrim-cabecera: #00000059; /* lżejsze przyciemnienie pod menu na zdjęciu, desktop */

  /* zdjęcie w pierwszym ekranie */
  --foto-brillo: 1;           /* rozjaśnienie, 1 = bez zmian */
  --foto-contraste: 1;
  --foto-proporcion: 5 / 4;   /* najwęższy kadr, w którym mieszczą się głowa barbera i cała głowa klienta */
  --foto-x: 70%;              /* kadr od włosów barbera do tyłu głowy klienta */
  --foto-y: 30%;              /* telefon i tablet, gdy kadr jest niższy niż 5:4 */
  --foto-fundido: 7%;         /* przejście w czerń z lewej, desktop */
  --foto-fundido-arriba: 14%; /* przejście w czerń od góry, pod nagłówkiem */

  /* jasna sekcja cennika: tło i krój z wariantu 3 */
  --papel: #F4F3EF;
  --papel-ink: #111111;
  --papel-muted: #56524C;      /* 7,0:1 na papierze */
  --papel-line: #11111140;
  --papel-hover: #3A3833;
  --banda-1: #111111;          /* pasy nagłówków tabeli: czerń, grafit, jasna szarość */
  --banda-2: #56524C;          /* papier na grafitowym pasie: 7,0:1 */
  --banda-3: #D9D5CD;

  /* okno rezerwacji: odwrócone, biel z czernią */
  --bg-alt: #FFFFFF;
  --ink-alt: #000000;
  --muted-alt: #5A564F;       /* 7,3:1 na bieli */
  --line-alt: #00000026;

  /* kroje: dwa na całą stronę */
  --font-body: "Archivo", Arial, sans-serif;       /* nagłówki, menu, przyciski */
  --font-texto: "Newsreader", Georgia, serif;      /* podtytuł (kursywa) i cennik */

  /* H1: wersja B z testu 2026-09-26, wąski, gruby, pochyły, jak Birds */
  --h1-stretch: 75%;
  --h1-weight: 800;
  --h1-style: italic;
  --h1-size: clamp(2.25rem, 11.2vw, 4.1rem);       /* telefon: "PERFECCIONANDO" na całą szerokość */
  --h1-size-ancho: clamp(2.5rem, 4.55vw, 4.1rem);  /* od 900 px: "PERFECCIONANDO" w jednym wierszu lewej kolumny */
  --h1-leading: 0.9;
  --h1-textura: url(#oxido);  /* wytarta krawędź; "none" ją wyłącza */

  /* rok 1923 w H1 (js/anio.js) */
  --anio-linea-grosor: 0.07em;   /* linia "cięcia brzytwą" pod rokiem */
  --anio-linea-bajo: -0.02em;
  --anio-linea-recorte: 0.1em;   /* kursywa wystaje w prawo */
  --anio-seguro: 3s;             /* gdyby JS nie ruszył, rok i tak się pokaże */

  /* skala tekstu */
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --t-lead-serif: clamp(1.25rem, 1.75vw, 1.5rem); /* Newsreader wygląda na mniejszy */
  --t-subtitulo: 1.875rem;     /* nazwa kolumny w tabeli i telefon w stopce */
  --t-servicio: 1.1875rem;     /* wiersz tabeli cen */
  --filas: 6;                  /* ponytail: najdłuższa kolumna tabeli cen ma 6 usług; przy siódmej podbić */
  --titulo-size: clamp(5rem, 15vw, 15rem); /* wielkie "Servicios" */
  --titulo-perspectiva: 800px;
  --cinta-size: clamp(2.75rem, 6.5vw, 6rem); /* taśma z tekstem przed historią */

  /* skala odstępów */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7.5rem;
  --pad-x: clamp(1rem, 4vw, 3rem);
  --max: 84rem;               /* 1344 px */

  /* elementy */
  --radius: 0;                /* ostre rogi, jak kafle i szyldy */
  --btn-h: 3rem;
  --nota: 4.8;                /* ocena Google, wypełnienie gwiazdek */
  --nota-size: 2.25rem;
  --estrella: 1.375rem;
  --estrella-gap: 0.2rem;
  --estrella-vacia: #FFFFFF40; /* niewypełniona część gwiazdki */
  --mono-w: 3.5rem;
  --nav-stretch: 125%;        /* pasek jak u Hagi's (GT America Expanded): najszersze Archivo */
  --nav-weight: 500;
  --t-nav: 0.75rem;
  --nav-tracking: 0.04em;
  --red-toque: 2.5rem;        /* pole kliknięcia ikony sociala */
  --red-icono: 1.25rem;
  --hero-h: min(100svh, 61.25rem);
  --hero-foto-max: 50svh;     /* telefon i tablet: zdjęcie nie spycha przycisku pod zgięcie */
  --cabecera-h: 5rem;         /* wysokość przyklejonego nagłówka: odstęp kotwic i telewizora */
  --t-cabecera: 250ms;        /* nagłówek robi się czarny po pierwszym ekranie */
  --t-popover: 200ms;         /* wejście okna rezerwacji, kolor ikon */
  --popover-y: 0.75rem;       /* okno wjeżdża o tyle */
  --t-detalle: 350ms;         /* rozwijanie odpowiedzi w pytaniach */
  --measure: 30em;            /* szerokość akapitu */
  --apps-w: 28rem;            /* okno rezerwacji */
  --ring: 2px;                /* obwódka fokusu */
  --ring-gap: 3px;
  --underline-gap: 5px;

  /* sekcja historii (podgląd Codexa, 00_DLA_MAKSA/06-HISTORIA.html) */
  --history-section-pad: clamp(2rem, 5vw, 5rem);
  --history-aire: clamp(1.5rem, 5vw, 4.5rem);  /* dodatkowa czerń nad i pod treścią historii; treść i telewizor bez zmian */
  --history-mobile-year: clamp(1.5rem, 5.8vw, 2.25rem);
  --history-mobile-max: 42rem; /* telefon i tablet: kolumna telewizora, kafelków i tekstu */
  --history-mobile-tv: 34rem;
  --history-column-gap: clamp(2rem, 4vw, 4rem);
  --history-fade: 300ms;
  --history-control-height: 2.75rem;
  --history-icon: 1.125rem;
  --history-dial-ink: #dedacf;
  --history-dial-shadow: #191b19;
  --history-dial-duration: 340ms;
  --history-noise-duration: 240ms;

  /* tekstura ziarna: szum SVG, na czerni rozjaśnia, na papierze przyciemnia */
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='.1'/></svg>");

  /* historia: otwarcie */
  --history-titulo: clamp(3.25rem, 7vw, 7rem);
  --history-titulo-sm: clamp(2.75rem, 4.2vw, 4rem);   /* "Cien años / de oficio.": główny nagłówek sekcji, "Cien años" mieści się w lewej kolumnie od 1100 px */
  /* laptop: wysokość sekcji pod nagłówkiem; telewizor tak duży, jak pozwala ekran
     (1.053 = szerokość do wysokości przyciętego renderu, viewBox 1390x1320) */
  --history-alto: calc(100svh - var(--cabecera-h) - var(--s-5) - var(--s-6));
  --history-kafel-h: 4.75rem;  /* laptop: wysokość kafelka roku */
  --history-tv-w: min(48rem, 46%, calc((var(--history-alto) - var(--history-kafel-h) - var(--s-5)) * 1.053));

  /* galeria */
  --galeria-fila: 14rem;       /* wysokość rzędu; zespół i portrety zajmują dwa, razem trzy rzędy */
  --galeria-gap: 0.5rem;
  --galeria-fondo: #16140F;    /* zanim zdjęcie się wczyta */
  --galeria-zoom-t: 900ms;
  --galeria-entrada-y: 1.25rem; /* wejście zdjęcia: o tyle podjeżdża do góry */
  --galeria-entrada-t: 900ms;
  --galeria-entrada-paso: 90ms; /* odstęp między kolejnymi zdjęciami */

  /* nożyczki w pytaniach */
  --tijeras-w: clamp(12rem, 24vw, 22rem);
  --tijeras-sangria: clamp(1rem, 4vw, 4rem);  /* odsunięcie od lewej krawędzi tytułu */

  /* stopka */
  --azulejos-h: 72px;          /* trzy rzędy kafli: biały, czarny pas, biały */
  --azulejo-blanco: #EDEAE3;
  --azulejo-negro: #121212;
  --azulejo-fuga: #8E8980;
  --pie-logo-w: 19rem;

  /* punkt przełamania: 56.25em = 900 px. W @media wpisany wprost,
     bo var() nie działa w warunku media query. */
  --bp-md: 56.25em;
}