/* PropFirm.pl — design tokens. GENERATED from wp-kit/tokens.json by build/tokens.py — do not edit by hand.
   Never use raw colours or sizes in components — always one of these variables. */

/* Light theme (default). */
:root {
  color-scheme: light;

  /* Brand */
  --pf-indigo: #060097;
  --pf-indigo-hover: #211aa8;
  --pf-yellow: #ffcd57;

  /* Colour roles — light */
  --pf-bg: #ffffff;
  --pf-surface: #f1f1f6;  /* sections, sidebar boxes, table headers */
  --pf-raised: #ffffff;  /* cards on surface */
  --pf-text: #22232a;  /* headings and body */
  --pf-text-2: #4b4e5b;  /* secondary text, descriptions */
  --pf-text-3: #676978;  /* meta: dates, counters, captions */
  --pf-line: #cdced8;  /* dividers, card borders */
  --pf-line-strong: #8d8fa1;  /* form controls (3:1 on white, WCAG 1.4.11) */
  --pf-action: var(--pf-indigo);  /* links, primary buttons, eyebrows */
  --pf-action-hover: var(--pf-indigo-hover);
  --pf-action-text: #ffffff;  /* text on primary button */
  --pf-action-soft: #eeedf8;  /* active chip, brand badge background */
  --pf-action-soft-line: #d9d6ed;
  --pf-accent: var(--pf-yellow);  /* small highlights only, never large areas */
  --pf-accent-hover: #ffd877;
  --pf-accent-text: #29230e;
  --pf-promo-bg: #fff3d3;
  --pf-promo-text: #665017;
  --pf-contest-bg: #eaf4f0;
  --pf-contest-text: #22604c;
  --pf-positive: #22604c;
  --pf-negative: #9b2c2c;
  --pf-focus: #8b7be8;
  --pf-logo: var(--pf-indigo);  /* site logo (header, footer): indigo on light, near-white on dark */
  --pf-logo-plate: #ffffff;
  --pf-logo-plate-dark: #131722;  /* plate for logos made for dark backgrounds (white wordmarks), both themes */
  --pf-live: #2fa36b;  /* "market live" dot */
  --pf-overlay: rgba(17, 19, 25, .72);
  --pf-on-overlay: #ffffff;  /* text on --pf-overlay (video duration) */
  --pf-media-bg: #000000;  /* video player letterbox */

  /* Typography */
  --pf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pf-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  /* baseline (variant 1): system stack — unchanged, kept for comparison and as fallback */
  --pf-font-inter: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  /* PROTOTYPE variant A: self-hosted Inter (fonts/), size-adjusted fallback in css/pf-fonts.css */
  --pf-font-num: "Geist Mono", "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;  /* PROTOTYPE: numbers only (PropIndeks, prices, table values, ratings) — class .pf-num */
  --pf-fw-display-strong: 700;  /* PROTOTYPE variant 3 only: headings heavier than --pf-fw-heading */
  --pf-ls-inter-h1: -0.02em;  /* PROTOTYPE: Inter h1 (system font keeps -0.035em) */
  --pf-ls-inter-h2: -0.015em;
  --pf-ls-inter-h3: -0.01em;
  --pf-ls-display-h: -0.02em;  /* PROTOTYPE variant 3 headings */
  --pf-fs-display: 62px;  /* home hero only */
  --pf-fs-h1: 48px;  /* page titles: ranking, review, archives */
  --pf-fs-h1-article: 40px;  /* long post titles: news, analyses, guides */
  --pf-fs-h2: 30px;  /* section headings, article H2 */
  --pf-fs-h3: 21px;  /* subsections, article H3 */
  --pf-fs-h4: 18px;  /* card titles, widget titles */
  --pf-fs-lead: 20px;  /* intro under H1 */
  --pf-fs-reading: 18px;  /* long-form text (articles, reviews) */
  --pf-fs-body: 17px;  /* interface text */
  --pf-fs-control: 15px;  /* buttons, tabs, small links */
  --pf-fs-meta: 14px;  /* dates, labels, captions, table cells */
  --pf-fs-input: 16px;  /* form fields on phones (prevents iOS zoom) */
  --pf-fs-eyebrow: 13px;  /* uppercase labels — the only size below 14 */
  --pf-fs-score: 24px;  /* score value in lists */
  --pf-fs-score-row: 22px;  /* score value in the phone firm row */
  --pf-fs-score-lg: 48px;  /* score value in the review head */
  --pf-fs-icon: 24px;  /* text-glyph icons (deadline, video placeholder) */
  --pf-fw-regular: 400;
  --pf-fw-medium: 500;
  --pf-fw-semibold: 600;
  --pf-fw-heading: 650;
  --pf-lh-tight: 1.08;  /* display / H1 */
  --pf-lh-heading: 1.2;
  --pf-lh-snug: 1.4;  /* card titles, UI */
  --pf-lh-body: 1.6;
  --pf-lh-reading: 1.75;
  --pf-ls-display: -0.045em;
  --pf-ls-heading: -0.025em;
  --pf-ls-eyebrow: 0.08em;

  /* Space (4px grid) */
  --pf-space-1: 4px;
  --pf-space-2: 8px;
  --pf-space-3: 12px;
  --pf-space-4: 16px;
  --pf-space-5: 24px;
  --pf-space-6: 32px;
  --pf-space-7: 48px;
  --pf-space-8: 64px;
  --pf-space-9: 96px;

  /* Shape */
  --pf-radius-sm: 4px;  /* badges, tags, code */
  --pf-radius: 7px;  /* buttons, inputs, chips */
  --pf-radius-card: 9px;  /* cards, panels, images */
  --pf-radius-logo: 10px;  /* logo tiles */
  --pf-shadow-pop: 0 12px 32px rgba(17, 19, 25, .14);

  /* Motion (1.4.2): short, ease-out, only transform / opacity / colours; prefers-reduced-motion turns transitions off (pf-base.css) */
  --pf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* entering, press, header reveal */
  --pf-dur-press: 160ms;  /* press feedback (scale 0.97) */
  --pf-dur: 200ms;  /* small UI: header, to-top, card image */

  /* Sizes */
  --pf-container: 1248px;  /* including gutters */
  --pf-gutter: 24px;  /* 1.4.1: was 32 px — room for the 64 px content↔sidebar gap at 1280 */
  --pf-main: 850px;  /* main column next to sidebar */
  --pf-sidebar: 286px;
  --pf-layout-gap: 64px;  /* content ↔ sidebar (1.4.1; was 48 px) */
  --pf-header-h: 76px;
  --pf-logo-w: 128px;  /* header logo: 39 px high in the 76 px header (about half); was 166 px */
  --pf-logo-w-footer: 148px;
  --pf-ratio-post: 1200 / 628;  /* featured images of posts (1200×628, text on the image) — never crop */
  --pf-ratio-video: 16 / 9;  /* YouTube thumbnails */
  --pf-touch: 44px;
  --pf-sticky-top: 0px;  /* height of the visible sticky header; sticky elements sit below it */
  --pf-control-h: 48px;
}

/* Long-form text on desktop: 19 px / 1.7 in the full main column (about 85 characters per line, owner 31.10.2026, #73). */
@media (min-width: 1100px) {
  :root {
    --pf-fs-reading: 19px;
    --pf-lh-reading: 1.7;
  }
}

/* Phones and small tablets. */
@media (max-width: 800px) {
  :root {
    --pf-fs-display: 40px;
    --pf-fs-h1: 34px;
    --pf-fs-h1-article: 30px;
    --pf-fs-h2: 25px;
    --pf-fs-h3: 19px;
    --pf-fs-h4: 17px;
    --pf-fs-lead: 18px;
    --pf-fs-control: 16px;
    --pf-gutter: 16px;
    --pf-control-h: 50px;
    --pf-header-h: 64px;
    --pf-logo-w: 112px;
  }
}

/* Sticky elements sit below the visible header. */
:root[data-header="shown"], :root[data-header="floating"] {
  --pf-sticky-top: var(--pf-header-h);
}

/* Colour roles — dark indigo (same names, only values change). */
:root[data-site-theme="dark"] {
  color-scheme: dark;
  --pf-bg: #111319;
  --pf-surface: #1a1d25;
  --pf-raised: #232733;
  --pf-text: #f0f1f5;
  --pf-logo: var(--pf-text);
  --pf-text-2: #b3b8c6;
  --pf-text-3: #979fae;
  --pf-line: #3d4353;
  --pf-line-strong: #6a7287;
  --pf-action: #b5adff;
  --pf-action-hover: #d4cfff;
  --pf-action-text: #181426;
  --pf-action-soft: #292642;
  --pf-action-soft-line: #484364;
  --pf-accent-text: #29230e;
  --pf-promo-bg: #382f1b;
  --pf-promo-text: #ffdb84;
  --pf-contest-bg: #17312a;
  --pf-contest-text: #9fdcc4;
  --pf-positive: #9fdcc4;
  --pf-negative: #ffb4b4;
  --pf-focus: #ffcd57;
  --pf-overlay: rgba(0, 0, 0, .78);
  --pf-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
}