/* ============================================================
   Przechowalnia24 — Design tokens (źródło: DESIGN.md, v1.0)
   ------------------------------------------------------------
   Tokeny (zmienne CSS) + klasy pomocnicze. Wdrożenie ADDYTYWNE:
   nie zmienia globalnego wyglądu strony — zmienne i klasy są
   opt-in i działają tylko tam, gdzie ich użyjesz (prefiks p24-).
   ============================================================ */

/* ---------- Font marki: TT Interphases Pro ---------- */
@font-face {
	font-family: 'TT Interphases Pro';
	src: url('/fonts/TT_Interphases_Pro_Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Interphases Pro';
	src: url('/fonts/TT_Interphases_Pro_Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Interphases Pro';
	src: url('/fonts/TT_Interphases_Pro_DemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokeny ---------- */
:root {
	/* Kolory — paleta podstawowa */
	--color-red-primary: #FF2629;
	--color-red-dark:     #C4201D;
	--color-charcoal:     #353C41;
	--color-slate:        #6B7980;
	--color-off-white:    #F7F7F7;
	--color-white:        #FFFFFF;
	/* Kolory — dark mode */
	--color-dark-bg:      #2F353A;
	--color-dark-surface: #3A4147;
	--color-muted-on-dark:#9AACB8;

	/* Typografia */
	--font-family:   'TT Interphases Pro', 'Inter', system-ui, sans-serif;
	--font-regular:  400;
	--font-medium:   500;
	--font-demibold: 600;

	/* Skala typograficzna (desktop) */
	--fs-display: 52px; --lh-display: 1.1;  --ls-display: -0.5px;
	--fs-h1:      40px; --lh-h1:      1.15; --ls-h1:      -0.3px;
	--fs-h2:      28px; --lh-h2:      1.25; --ls-h2:      -0.2px;
	--fs-h3:      20px; --lh-h3:      1.3;
	--fs-body-lg: 18px;
	--fs-body:    16px;
	--fs-body-sm: 14px;
	--fs-caption: 12px;
	--lh-body:    1.6;

	/* Odstępy (baza 8px) */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;
	--space-7:  48px;
	--space-8:  64px;
	--space-9:  80px;
	--space-10: 120px;

	/* Zaokrąglenia */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;

	/* Cienie */
	--shadow-card:       0 2px 8px rgba(53,60,65,0.08);
	--shadow-card-hover: 0 4px 16px rgba(53,60,65,0.14);
	--shadow-modal:      0 8px 32px rgba(53,60,65,0.18);

	/* Tranzycje */
	--transition-fast: 150ms ease-out;
	--transition-base: 220ms ease-out;
	--transition-slow: 350ms ease-out;

	/* Layout */
	--container-max:    1280px;
	--container-gutter: 80px;
	--grid-columns:     12;
	--grid-gutter:      24px;
}

@media (max-width: 921px) {
	:root {
		--fs-display: 36px;
		--fs-h1:      30px;
		--fs-h2:      23px;
		--fs-h3:      18px;
	}
}

/* ============================================================
   Klasy pomocnicze (opt-in). Stosuj świadomie w blokach,
   widżetach „Custom HTML" lub własnym CSS.
   ============================================================ */

/* ---------- Przyciski ---------- */
.p24-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-family);
	font-weight: var(--font-demibold);
	font-size: var(--fs-body);
	line-height: 1;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.p24-btn--sm { padding: 8px 16px;  font-size: var(--fs-body-sm); }
.p24-btn--lg { padding: 16px 32px; font-size: var(--fs-body-lg); }

.p24-btn--primary        { background: var(--color-red-primary); color: var(--color-white); }
.p24-btn--primary:hover  { background: var(--color-red-dark);    color: var(--color-white); }
.p24-btn--secondary      { background: transparent; color: var(--color-charcoal); border-color: var(--color-charcoal); }
.p24-btn--secondary:hover{ background: var(--color-charcoal); color: var(--color-white); }
.p24-btn--ghost-dark     { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.p24-btn--ghost-dark:hover{ background: var(--color-white); color: var(--color-charcoal); }
.p24-btn--destructive    { background: var(--color-red-dark); color: var(--color-white); }

.p24-btn:focus-visible { outline: 2px solid var(--color-red-primary); outline-offset: 2px; }
.p24-btn[disabled], .p24-btn.is-disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Karty ---------- */
.p24-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-base);
}
.p24-card:hover  { box-shadow: var(--shadow-card-hover); }
.p24-card--dark  { background: var(--color-dark-surface); color: var(--color-white); }
.p24-card--accent{ border-left: 4px solid var(--color-red-primary); }

/* ---------- Powierzchnie (warianty layoutu) ---------- */
.p24-surface-light { background: var(--color-off-white); color: var(--color-charcoal); }
.p24-surface-dark  { background: var(--color-dark-bg);   color: var(--color-white); }

/* ---------- Pola formularzy ---------- */
.p24-input {
	font-family: var(--font-family);
	font-size: var(--fs-body);
	color: var(--color-charcoal);
	background: var(--color-white);
	border: 1px solid var(--color-muted-on-dark);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
}
.p24-input:focus       { border-color: var(--color-red-primary); box-shadow: 0 0 0 3px rgba(255,38,41,0.12); outline: none; }
.p24-input::placeholder{ color: var(--color-muted-on-dark); }
.p24-input.is-error    { border-color: var(--color-red-dark); }

/* ---------- Tekst / akcenty ---------- */
.p24-text-secondary  { color: var(--color-slate); }
.p24-text-muted-dark { color: var(--color-muted-on-dark); }
.p24-accent          { color: var(--color-red-primary); }

/* ---------- Elementy dekoracyjne marki ---------- */
.p24-bar-right { border-right: 4px solid var(--color-red-primary); }
.p24-divider   { height: 2px; background: var(--color-red-primary); border: 0; margin: var(--space-5) 0; }

/* ---------- Pomocnicze klasy typografii ---------- */
.p24-display { font-family: var(--font-family); font-weight: var(--font-demibold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.p24-h1      { font-family: var(--font-family); font-weight: var(--font-demibold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.p24-h2      { font-family: var(--font-family); font-weight: var(--font-demibold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.p24-h3      { font-family: var(--font-family); font-weight: var(--font-demibold); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.p24-body    { font-family: var(--font-family); font-weight: var(--font-regular); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 680px; }
.p24-font    { font-family: var(--font-family); }