/*
 * procentownik – design tokens.
 * Every colour, font family, font size and spacing value is defined here once
 * and used everywhere else through var(). Media-query breakpoints are the only
 * literal sizes elsewhere (CSS does not allow var() there): 600px and 1024px.
 */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/caveat-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/caveat-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
	/* ---------- Kolory: marka ---------- */
	--color-brand: #4C1D95;
	--color-brand-strong: #5B2BB0;
	--color-brand-soft: #6D3FC4;
	--color-ink: #1A0B3B;
	--color-ink-soft: #2E1F4F;
	--color-ink-deep: #2E1A5C;

	/* ---------- Kolory: tekst ---------- */
	--color-text: #1A0B3B;
	--color-text-body: #4A3B66;
	--color-text-muted: #6B5A8E;
	--color-text-subtle: #9A8BB8;

	/* ---------- Kolory: na ciemnym tle ---------- */
	--color-on-dark: #FFFFFF;
	--color-on-dark-soft: #E4D9FA;
	--color-on-dark-muted: #D9CCF5;
	--color-on-dark-faint: #B3A3D6;
	--color-on-dark-line: #3A2A63;
	--color-on-dark-outline: #8B6CD1;
	--color-eyebrow-on-dark: #FDBA74;

	/* ---------- Kolory: powierzchnie ---------- */
	--color-bg: #FAF7FF;
	--color-surface: #FFFFFF;
	--color-surface-hover: #FBF9FF;
	--color-tint: #F1EAFF;
	--color-tint-2: #EDE4FF;
	--color-tint-3: #E4DAF7;
	/* Licznik warunków i kalendarz czasu (kafle promocji) */
	--color-gauge-easy: #6D3FC4;
	--color-gauge-medium: #4C1D95;
	--color-gauge-hard: #F97316;
	--color-gauge-track: #E4DAF7;
	--color-border: #E9E1F8;
	--color-border-strong: #D9CCF5;
	--color-border-input: #C9B8EC;
	--color-placeholder-line: #B9A5E3;
	--color-dim: #2E1A5C;

	/* ---------- Kolory: promocja zakończona (nagłówek) ---------- */
	--color-ended-hero: #3D2F5C;
	--color-ended-hero-tile: #4E3F70;
	--color-ended-hero-badge: #5B4A80;
	--color-ended-hero-title: #E4DDF0;
	--color-ended-badge-bg: #E5E1EC;

	/* ---------- Kolory: akcent (pomarańcz) ---------- */
	--color-cta: #F97316;
	--color-cta-hover: #FB923C;
	--color-on-cta: #1A0B3B;
	--color-accent-text: #C2410C;
	--color-accent-strong: #9A3412;
	--color-accent-deep: #7C2D12;
	--color-accent-line: #FDBA74;
	--color-icon-on-dark: #FB923C;
	--color-accent-tint: #FFEDD5;
	--color-accent-tint-2: #FFE8D6;
	--color-accent-tint-3: #FFF7ED;

	/* ---------- Kolory: stany ---------- */
	--color-success: #166534;
	--color-success-tint: #DCFCE7;
	--color-ended: #4E3F70;
	--color-ended-tint: #E9E5F0;
	--color-ended-tint-2: #EFEAF7;
	--color-ended-tint-3: #F1EEF6;

	/* ---------- Cienie ---------- */
	--shadow-card: 0 24px 60px rgba(26, 11, 59, 0.12);
	--shadow-hero-card: 0 24px 60px rgba(26, 11, 59, 0.35);
	--shadow-best-card: 0 24px 60px rgba(26, 11, 59, 0.14);
	--shadow-panel: 0 30px 60px rgba(26, 11, 59, 0.30);
	--shadow-modal: 0 30px 80px rgba(26, 11, 59, 0.4);
	--shadow-bonus-card: 0 24px 60px rgba(26, 11, 59, 0.28);
	--shadow-notice: 0 14px 40px rgba(26, 11, 59, 0.25);
	--shadow-sticky: 0 -10px 30px rgba(26, 11, 59, 0.12);

	/* ---------- Fonty ---------- */
	--font-sans: "Manrope", "Segoe UI", "Arial", sans-serif;
	--font-hand: "Caveat", "Comic Sans MS", cursive;

	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;

	/* ---------- Skala tekstu ---------- */
	--text-legal: 10px;
	--text-calendar-num: 15px;
	--text-2xs: 11px;
	--text-xs: 12px;
	--text-sm: 13px;
	--text-md: 14px;
	--text-base-sm: 15px;
	--text-base: 16px;
	--text-lg: 18px;
	--text-xl: 19px;
	--text-2xl: 20px;
	--text-3xl: 21px;
	--text-4xl: 22px;
	--text-5xl: 24px;
	--text-6xl: 26px;
	--text-7xl: 28px;
	--text-title: 30px;
	--text-8xl: 32px;
	--text-hero-sm: 34px;
	--text-9xl: 36px;
	--text-display-sm: 40px;
	--text-10xl: 44px;
	--text-hero-lg: 46px;
	--text-11xl: 48px;
	--text-12xl: 52px;
	--text-display: 56px;
	--text-giant: 120px;

	--leading-tight: 1.08;
	--leading-title: 1.12;
	--leading-section: 1.2;
	--leading-card: 1.25;
	--leading-heading: 1.15;
	--leading-snug: 1.3;
	--leading-body: 1.55;
	--leading-relaxed: 1.6;
	--leading-loose: 1.7;

	--tracking-tight: -0.02em;
	--tracking-snug: -0.01em;
	--tracking-caps: 0.08em;
	--tracking-code: 0.06em;

	/* ---------- Odstępy ---------- */
	--space-px: 1px;
	--space-2xs: 2px;
	--space-xs: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-26: 26px;
	--space-28: 28px;
	--space-32: 32px;
	--space-40: 40px;
	--space-36: 36px;
	--space-44: 44px;
	--space-48: 48px;
	--space-52: 52px;
	--space-56: 56px;
	--space-64: 64px;
	--space-72: 72px;
	--space-80: 80px;
	--space-88: 88px;

	/* ---------- Promienie ---------- */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 14px;
	--radius-2xl: 16px;
	--radius-3xl: 18px;
	--radius-4xl: 20px;
	--radius-5xl: 24px;
	--radius-pill: 999px;

	/* ---------- Linie ---------- */
	--border-width: 1px;
	--border-width-thick: 2px;
	--border-width-dot: 3px;

	/* ---------- Rozmiary elementów ---------- */
	--size-touch: 44px;
	--size-button: 48px;
	--size-button-lg: 50px;
	--size-button-xl: 52px;
	--size-button-cta: 54px;
	--size-input: 46px;
	--size-summary: 56px;
	--size-icon-xs: 14px;
	--size-icon-sm: 16px;
	--size-icon: 18px;
	--size-icon-md: 20px;
	--size-icon-xl: 24px;
	--size-icon-lg: 48px;
	--size-logo-header: 44px;
	--size-logo-mobile: 36px;
	--size-avatar: 44px;
	--size-avatar-xl: 72px;
	--size-avatar-md: 40px;
	--size-bank-logo-lg: 64px;
	--size-dot: 16px;
	--size-tile-number: 32px;
	--size-avatar-sm: 32px;
	--size-step: 36px;
	--size-doc-type: 40px;
	--size-check: 22px;
	--size-split-bar: 10px;
	--size-legend-dot: 10px;
	--size-notice-icon: 48px;
	--size-rotate-hand: -1deg;
	--size-rotate-sticker: 3deg;
	--size-bank-logo-sm: 44px;
	--size-bank-logo-md: 52px;
	--size-bank-logo-w: 96px;
	--size-bank-logo-h: 40px;
	--size-thumb-min-h: 120px;
	--size-rotate-badge: -3deg;

	/* ---------- Szerokości układu ---------- */
	--width-container: 1200px;
	--width-text: 560px;
	--width-text-narrow: 320px;
	--width-hero-card: 440px;
	--width-mega-col: 250px;
	--width-mega-card: 280px;
	--width-carousel-card: 84%;

	/* flex-basis dla elementów zawijanych (odpowiednik min. szerokości kolumny) */
	--basis-hero-text: 520px;
	--basis-hero-card: 380px;
	--basis-card: 300px;
	--basis-post-row: 520px;
	--basis-post-thumb: 168px;
	--basis-post-body: 240px;
	--basis-list-box: 440px;
	--basis-newsletter-text: 420px;
	--basis-newsletter-form: 380px;
	--basis-input: 220px;
	--basis-fact-icon: 150px;
	--basis-footer-brand: 320px;
	--basis-footer-col: 200px;
	--basis-footer-col-mobile: 40%;
	--basis-content: 560px;
	--basis-sidebar: 320px;
	--width-sidebar: 400px;
	--basis-promo-text: 560px;
	--basis-bonus-card: 388px;
	--width-bonus-card: 468px;
	--width-lead: 640px;
	--basis-fact: 170px;
	--basis-eligibility: 260px;
	--basis-timeline: 180px;
	--basis-verdict-option: 240px;
	--basis-mini-card: 220px;
	/* Najważniejsze promocje: karty obok panelu „Masz firmę?” */
	--basis-card-compact: 230px;
	--basis-top-cards: 760px;
	--basis-business-panel: 310px;
	--size-business-logo-w: 56px;
	--size-business-logo-h: 34px;
	--basis-form-field: 200px;
	--basis-notice-text: 360px;
	--basis-summary-text: 300px;
	--basis-reminder-text: 260px;
	--basis-account-promo: 520px;
	--basis-rating-parts: 320px;
	--basis-number: 40%;
	--basis-tile: 200px;
	--basis-author-text: 320px;
	--basis-calc-text: 280px;
	--width-fee-table: 560px;
	--basis-history-text: 260px;
	--basis-archive-text: 560px;
	--basis-best-main: 520px;
	--basis-best-side: 320px;
	--width-best-side: 400px;
	--basis-entry-thumb: 176px;
	--ratio-entry-image: 1200 / 630;
	--position-image-crop: left top; /* obrazek o innych proporcjach niż kafelek: kadr od lewego górnego rogu */
	--opacity-ended-image: 0.7;
	--basis-entry-body: 300px;
	--width-seo-text: 720px;
	--width-guide-hero: 860px;
	--width-guide-main: 760px;
	--width-guide-side: 360px;
	--basis-guide-side: 300px;
	--basis-example: 220px;
	--basis-info-card: 220px;
	--basis-related: 200px;
	--basis-calc-field: 220px;
	--basis-calc-results: 260px;
	--basis-promo-inline: 260px;
	--size-guide-image-h: 360px;
	--size-related-thumb: 110px;
	--size-calc-input: 52px;
	--size-toc-link: 40px;
	--size-progress: 4px;
	--size-bank-logo-hero: 100px;
	--size-bank-logo-hero-sm: 100px;
	/* Strony informacyjne, O mnie, wyszukiwarka, 404 */
	--text-body-lg: 17px;
	--tracking-display: -0.04em;
	--leading-none: 1;
	--size-rotate-ups: -5deg;
	--size-about-photo: 240px;
	--size-about-photo-sm: 200px;
	--border-width-photo: 6px;
	--size-proof-image-h: 180px;
	--size-post-thumb-h: 120px;
	--size-quoted-h: 52px;
	--size-search-input: 56px;
	--size-search-thumb-w: 96px;
	--size-search-thumb-h: 72px;
	--size-best-match-icon: 64px;
	--size-error-circle: 320px;
	--size-error-circle-sm: 220px;
	--size-error-dot: 28px;
	--size-error-dot-sm: 20px;
	--text-error-digits: 120px;
	--text-error-digits-sm: 84px;
	--text-hand-xl: 34px;
	--width-search-form: 760px;
	--width-error-form: 600px;
	--width-page-aside: 300px;
	--width-page-main: 760px;
	--width-contact-main: 820px;
	--basis-page-aside: 260px;
	--basis-search-field: 300px;
	--basis-principle: 260px;
	--basis-card-post: 220px;
	--basis-error-art: 420px;
	--basis-contact-field: 240px;
	--width-scroll-card: 80%;
	--width-scroll-card-sm: 62%;
	--size-stat-min: 120px;
	--size-entry-icon: 44px;
	--stroke-icon-thin: 1.6;
	--size-checkbox: 20px;
	--size-avatar-comment: 36px;
	--width-rotate-flip: -3deg;

	/* ---------- Ruch ---------- */
	--duration-fast: 120ms;

	/* Ranking i kalkulator */
	--width-rk-place: 56px;
	--basis-rk-account: 190px;
	--width-rk-rating: 60px;
	--basis-rk-cell: 130px;
	--basis-rk-atm: 110px;
	--width-rk-promo: 112px;
	--width-rk-actions: 156px;
	--size-rk-place: 40px;
	--basis-winner: 300px;
	--basis-ranking-main: 560px;
	--basis-ranking-side: 300px;
	--basis-ranking-faq: 420px;
	--size-weight-bar: 8px;
	--size-change-icon: 28px;
	--basis-calc-form: 520px;
	--basis-calc-result: 380px;
	--width-calc-rate: 260px;
	--size-calc-field: 56px;
	--size-calc-range: 28px;
	--size-calc-link-icon: 40px;
	--basis-calc-period: 150px;
	--size-hand-tilt: -2deg;
	--width-promo-bar-note: 220px;
	--size-promo-bar-close-sm: 32px;
	--shadow-promo-bar: 0 14px 30px rgba(26, 11, 59, 0.14);
	--duration-promo-bar: 0.25s;
	--offset-promo-bar-hidden: -12px;
	--height-mega-max: calc(100vh - 90px);
	--scroll-offset: 96px;
	--scroll-offset-bar: 170px;
	--header-height: 81px; /* nadpisywane przez menu.js rzeczywistą wysokością nagłówka */
	--height-promo-bar-open: 74px;
}