/* ============================================================
   SWITALSKI.LAW — Design tokens
   Consolidated from design-source/.../styles/tokens.css and
   design-source/.../_ds/.../colors_and_type.css (the two source
   files carry identical :root values — see Faza 1 report for the
   diff). Font loading itself lives in fonts.css (Faza 0); this
   file only declares the --font-* stacks.
   ============================================================ */

:root {
	/* -----------------------------------------------------------
	   CORE PALETTE
	   Hard tonal contrast: paper-white surface, ink-black type,
	   single mustard-gold accent. No gradients, no tints.
	   ----------------------------------------------------------- */
	--ink:          #0A0A0A;
	--ink-pure:     #000000;
	--paper:        #FFFFFF;
	--paper-warm:   #FAF8F3;
	--gold:         #AF9634;
	--gold-deep:    #8A7528;
	--gold-pale:    #E8DDB5;

	/* -----------------------------------------------------------
	   NEUTRAL SCALE — warm-leaning ramp, paper to ink
	   ----------------------------------------------------------- */
	--n-0:   #FFFFFF;
	--n-50:  #F7F6F2;
	--n-100: #EDECE6;
	--n-200: #DAD8CF;
	--n-300: #BAB7AB;
	--n-400: #908D80;
	--n-500: #5F5D54;
	--n-600: #3D3C36;
	--n-700: #2A2A26;
	--n-800: #181816;
	--n-900: #0A0A0A;

	/* -----------------------------------------------------------
	   SECONDARY ACCENTS — the only colors outside the core
	   ink/paper/gold/neutral palette. Primitive + semantic aliases,
	   same pattern as the --fg- / --bg- groups below (never reach
	   for the primitive directly from component CSS).
	   NB: never write a star-slash sequence inside this comment —
	   it self-terminates the comment and the parser then swallows
	   the next declaration (this exact bug ate --mint-pale).
	   ----------------------------------------------------------- */
	--mint-pale:      #B5E5E1; /* pastel brand accent — primitive */
	--console-string:  var(--mint-pale); /* string-value color in the fake terminal (hero) */
	--portrait-frame-bg: var(--mint-pale); /* backdrop behind the bio/about portrait */
	--console-success: #6FD79B; /* "ready" line in the fake terminal — brighter than --success on purpose */
	--status-live:      #36B37E; /* pulse dot on the hero "status" pill */

	/* -----------------------------------------------------------
	   SEMANTIC FOREGROUND / BACKGROUND
	   Use these in components — never reach for raw palette tokens.
	   ----------------------------------------------------------- */
	--fg-1: var(--ink);
	--fg-2: var(--n-600);
	--fg-3: var(--n-400);
	--fg-inv: var(--paper);
	--fg-inv-2: var(--n-200);
	--fg-accent: var(--gold);

	--bg-1: var(--paper);
	--bg-2: var(--paper-warm);
	--bg-3: var(--n-100);
	--bg-dark: var(--ink);
	--bg-dark-2: var(--n-800);

	/* -----------------------------------------------------------
	   SEMANTIC STATUS (used rarely — this is a law firm)
	   ----------------------------------------------------------- */
	--success: #2F7D4F;
	--warning: #C28A2A;
	--danger:  #B23A2F;
	--info:    var(--gold);

	/* -----------------------------------------------------------
	   BORDERS & DIVIDERS
	   ----------------------------------------------------------- */
	--border-1: var(--n-200);
	--border-2: var(--n-300);
	--border-strong: var(--ink);
	--border-inv: rgba(255,255,255,.14);

	/* -----------------------------------------------------------
	   SHADOW SYSTEM — flat brand, hard offset shadows, never blurry
	   ----------------------------------------------------------- */
	--shadow-card:   4px 4px 0 0 var(--ink);
	--shadow-card-lg: 8px 8px 0 0 var(--ink);
	--shadow-card-gold: 4px 4px 0 0 var(--gold);
	--shadow-soft:   0 2px 8px rgba(10,10,10,.06);
	--shadow-inv:    4px 4px 0 0 var(--gold);

	/* -----------------------------------------------------------
	   RADII — mostly squared off; pills for CTAs only
	   ----------------------------------------------------------- */
	--r-0: 0px;
	--r-1: 2px;
	--r-2: 4px;
	--r-3: 8px;
	--r-pill: 999px;

	/* -----------------------------------------------------------
	   SPACING (4px base)
	   ----------------------------------------------------------- */
	--s-0:  0;
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  12px;
	--s-4:  16px;
	--s-5:  24px;
	--s-6:  32px;
	--s-7:  48px;
	--s-8:  64px;
	--s-9:  96px;
	--s-10: 128px;

	/* -----------------------------------------------------------
	   TYPE — font stacks (loading: see fonts.css)
	   ----------------------------------------------------------- */
	--font-display: "Oswald", "Oswald Fallback", "Anton", "Bebas Neue", Impact, "Arial Narrow", system-ui, sans-serif;
	--font-body:    "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono:    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-serif:   "Source Serif Pro", Georgia, "Times New Roman", serif; /* declared, not used by default — reserved for formal-serif requests from authorities */

	/* -----------------------------------------------------------
	   TYPE SCALE — display (Oswald Bold, condensed, uppercase)
	   ----------------------------------------------------------- */
	--t-hero:    clamp(56px, 9vw, 144px);
	--t-display: clamp(40px, 6vw, 88px);
	--t-h1:      clamp(32px, 4vw, 56px);
	--t-h2:      clamp(24px, 3vw, 40px);
	--t-h3:      24px;
	--t-h4:      20px;

	/* Body scale (Montserrat) */
	--t-lead:    20px;
	--t-body:    17px;
	--t-small:   15px;
	--t-meta:    13px;
	--t-micro:   11px;

	--lh-tight: 0.92;
	--lh-snug:  1.1;
	--lh-body:  1.55;
	--lh-loose: 1.7;

	/* -----------------------------------------------------------
	   COMPONENT DEFAULTS — frozen tweaks-panel decisions
	   (design-source/.../components/app.jsx:4-8). See Faza 1
	   report §3 for the full audit of what these replace.
	   ----------------------------------------------------------- */
	--ticker-speed: 64s; /* hero-ticker animation-duration, was tw.tickerSpeed */
}

/* Mobile/tablet header is taller (44px burger vs 26px logo row) —
   measured 81px at ≤920px, where the burger replaces the nav. */
@media (max-width: 920px) {
	:root {
		--header-h: 81px;
	}
}

/* ============================================================
   BREAKPOINTS — documentation only.
   CSS custom properties do NOT work inside @media conditions
   (`@media (max-width: var(--bp-md))` is invalid), so this is a
   comment, not a token. Use the literal px values below directly
   in component @media rules — this is the one sanctioned
   exception to "zero literal values in CSS".

   Scale: 640 / 920 / 1100 / 1400. Derived from the prototype's
   9 real breakpoints by consolidating upward only — every merge
   widens the range a rule applies over, never narrows it, so no
   desktop layout has to survive on a screen narrower than it was
   designed for. Zero conflicts, zero literal exceptions needed.
   1024px does not appear anywhere in the design and is not used.

     560, 640          → 640
     860, 900, 920      → 920
     980, 1000, 1100    → 1100
     1400                → 1400 (unchanged — bio-hero-sidelabel)
   ============================================================ */

/* ============================================================
   SEMANTIC TYPOGRAPHIC ELEMENTS
   ============================================================ */

.t-hero,
.t-display,
.t-h1, .t-h2, .t-h3, .t-h4 {
	font-family: var(--font-display);
	font-weight: 700; /* Oswald Bold */
	text-transform: uppercase;
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--fg-1);
	margin: 0;
}

.t-hero    { font-size: var(--t-hero);    line-height: 0.88; letter-spacing: -0.02em; }
.t-display { font-size: var(--t-display); line-height: 0.92; }
.t-h1      { font-size: var(--t-h1);      line-height: var(--lh-snug); }
.t-h2      { font-size: var(--t-h2);      line-height: var(--lh-snug); }
.t-h3      { font-size: var(--t-h3);      line-height: 1.2; letter-spacing: 0; }
.t-h4      { font-size: var(--t-h4);      line-height: 1.25; letter-spacing: 0; }

/* Body */
.t-lead, .t-body, .t-small, .t-meta, .t-micro {
	font-family: var(--font-body);
	color: var(--fg-1);
	margin: 0;
}
.t-lead   { font-size: var(--t-lead);   line-height: var(--lh-body); font-weight: 400; }
.t-body   { font-size: var(--t-body);   line-height: var(--lh-body); font-weight: 400; }
.t-small  { font-size: var(--t-small);  line-height: var(--lh-body); font-weight: 400; }
.t-meta   { font-size: var(--t-meta);   line-height: 1.45; font-weight: 500; color: var(--fg-3); letter-spacing: 0.02em; }
.t-micro  { font-size: var(--t-micro);  line-height: 1.4; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }

/* Eyebrow — small uppercase label, often paired with a section title */
.t-eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.t-eyebrow::before {
	content: "";
	width: 24px; height: 2px;
	background: var(--gold);
	display: inline-block;
}

/* Mono — for regulatory citations: "Art. 63 MiCA", "PZ-5181" */
.t-mono {
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0;
	color: var(--fg-2);
}

/* ============================================================
   COMPONENT TOKENS — Faza 2 (header / mega-menu / drawer / footer)
   Values lifted 1:1 from the prototype's inline styles in
   header.jsx, sections.jsx and common.jsx.
   ============================================================ */
:root {
	/* Alpha borders on inverted (--ink) surfaces */
	--border-inv-faint: rgba(255,255,255,0.06);
	--border-inv-soft:  rgba(255,255,255,0.08);
	--border-inv-mid:   rgba(255,255,255,0.10);
	--border-inv-row:   rgba(255,255,255,0.12);
	--border-inv-ctl:   rgba(255,255,255,0.16);
	--border-inv-ctl-2: rgba(255,255,255,0.18);
	--surface-inv-ctl:  rgba(255,255,255,0.03);

	/* Gold washes (footstrip backgrounds + hovers) */
	--gold-tint-05: rgba(175,150,52,0.05);
	--gold-tint-06: rgba(175,150,52,0.06);
	--gold-tint-10: rgba(175,150,52,0.10);
	--gold-tint-14: rgba(175,150,52,0.14);

	/* Glass / overlay surfaces */
	--header-bg-glass: rgba(10,10,10,0.92);
	--mega-bg:         rgba(13,13,12,0.98);
	--overlay-scrim:   rgba(0,0,0,0.55);

	/* Overlay shadows — sanctioned soft exceptions to the hard-offset
	   system: floating chrome (mega panel, drawer), not cards */
	--shadow-mega:   0 30px 60px rgba(0,0,0,0.45);
	--shadow-drawer: -24px 0 60px rgba(0,0,0,0.50);

	/* Layout */
	--container-max: 1280px;
	--header-h: 72px; /* measured sticky-header height (desktop; 81px ≤920px — see override below) */
	--scroll-offset: calc(var(--header-h) + var(--s-4)); /* header + breathing room; anchor sections subtract their own top padding from this (home.css) */
	--drawer-w: 380px;
	--drawer-acc-max: 1400px; /* max-height cap for the SERVICES accordion */
	--mw-220: 220px;
	--mw-320: 320px;
	--mw-360: 360px;

	/* Border widths */
	--bw-1: 1px;
	--bw-1-5: 1.5px;
	--bw-2: 2px;
	--bw-3: 3px;

	/* Control radius — burger, drawer plus-box, drawer CTA (3px in prototype) */
	--r-ctl: 3px;

	/* PORT FONT SIZES — raw prototype px values (pending consolidation
	   into the semantic --t-* scale in a later pass) */
	--fs-11: 11px;
	--fs-12: 12px;
	--fs-13: 13px;
	--fs-13-5: 13.5px;
	--fs-14: 14px;
	--fs-15: 15px;
	--fs-18: 18px;
	--fs-22: 22px;
	--fs-26: 26px;

	/* PORT SPACING — raw prototype px values outside the 4px --s scale */
	--sp-2: 2px;
	--sp-3: 3px;
	--sp-6: 6px;
	--sp-9: 9px;
	--sp-10: 10px;
	--sp-14: 14px;
	--sp-18: 18px;
	--sp-20: 20px;
	--sp-22: 22px;
	--sp-26: 26px;
	--sp-28: 28px;
	--sp-30: 30px;
	--sp-34: 34px;
	--sp-36: 36px;
	--sp-44: 44px;
	--sp-56: 56px;
	--sp-72: 72px;
	--sp-84: 84px;
}

/* ============================================================
   COMPONENT TOKENS — Faza 3 (home: hero, services, cross-border,
   about, steps, logos, insights teaser, CTA). Values lifted 1:1
   from hero.jsx / sections.jsx / insights.jsx inline styles.
   ============================================================ */
:root {
	/* Hero background textures (three composed layers) */
	--hero-bg-stripe:           rgba(255,255,255,0.05);
	--hero-bg-dot-gold:         rgba(175,150,52,0.18);
	--hero-bg-dot-gold-opacity: 0.6;
	--hero-bg-grid-gold:        30px;
	--hero-bg-dot-white:        rgba(255,255,255,0.07);
	--hero-bg-grid-white:       46px;

	/* Hero ornaments */
	--hero-bracket-line:   rgba(175,150,52,0.30);
	--hero-bracket-size:   54px;
	--hero-bracket-top:    96px;
	--hero-bracket-left:   40px;
	--hero-bracket-size-sm: 40px;
	--hero-bracket-top-sm:  70px;
	--hero-ring-gold:      rgba(175,150,52,0.12);
	--hero-ring-white:     rgba(255,255,255,0.04);
	--hero-ring-lg-size:   460px;
	--hero-ring-lg-left:   -170px;
	--hero-ring-lg-bottom: -190px;
	--hero-ring-sm-size:   300px;
	--hero-ring-sm-left:   -90px;
	--hero-ring-sm-bottom: -110px;
	--hero-s-stroke:       rgba(255,255,255,0.05);
	--hero-s-dot:          rgba(175,150,52,0.22);
	--hero-s-size:         620px;
	--hero-s-right:        -60px;
	--hero-s-top:          -120px;

	/* Console */
	--shadow-console: 0 24px 60px rgba(0,0,0,0.35);

	/* Card / control surfaces on --ink */
	--surface-inv-card:       rgba(255,255,255,0.025);
	--surface-inv-card-hover: rgba(255,255,255,0.045);
	--surface-inv-tabs:       rgba(255,255,255,0.06);
	--border-inv-hi:          rgba(255,255,255,0.25);
	--scrim-badge:            rgba(10,10,10,0.7);

	/* About: portrait hard shadow + caption scrim gradient */
	--shadow-card-lg-gold: 10px 10px 0 0 var(--gold);

	/* Sandbox (Faza 3.1 B): active-card lift shadow + dim level for
	   the non-active cards while a panel is open */
	--shadow-card-gold-lg: 8px 8px 0 0 var(--gold);
	--svcx-dim: 0.85;

	/* Sandbox (Faza 3.2): readable text columns inside the full-row panel */
	--svcx-col-w: 36ch;    /* max measure of a single list column (~60-70 chars incl. marker) */
	--svcx-diff-max: 70ch; /* max measure of the differentiator line */

	/* Hero H1 on phones (Faza 3.2) — same clamp, lower floor; text unchanged */
	--t-hero-h1-sm: clamp(36px, 4.8vw, 84px);
	--about-caption-scrim: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 30%, rgba(10,10,10,0.92) 65%, rgba(10,10,10,0.98) 100%);

	/* Logos strip cell height */
	--logos-cell-h: 110px;

	/* Client-logo shared optical height (Faza 6.7) — one value for all
	   four marks regardless of native aspect ratio; chosen to sit inside
	   the per-logo 26–34px range the design source used before real
	   client marks replaced the placeholders. */
	--logos-img-h: 32px;

	/* CTA gold mesh + insights placeholder scene */
	--cta-mesh-dot:     rgba(175,150,52,0.16);
	--insight-ph-bg:    #1A1815;
	--insight-ph-glow:  rgba(175,150,52,0.18);
	--insight-ph-dot:   rgba(175,150,52,0.20);
	--insight-ph-stroke: rgba(175,150,52,0.4);

	/* Fluid display sizes (per-section clamps from the prototype) */
	--t-hero-h1:       clamp(42px, 4.8vw, 84px);
	--t-sec-h2:        clamp(36px, 5vw, 64px);
	--t-logos-h2:      clamp(32px, 4.4vw, 56px);
	--t-about-h2:      clamp(32px, 4.5vw, 60px);
	--t-cta-h2:        clamp(38px, 5.5vw, 80px);
	--t-steps-num:     clamp(72px, 8vw, 112px);
	--t-steps-tab:     clamp(15px, 1.5vw, 19px);
	--t-metric:        clamp(48px, 5vw, 72px);
	--t-insight-h3:    clamp(24px, 2.4vw, 34px);
	--t-insight-ph:    clamp(72px, 10vw, 140px);
	--t-insight-ph-sm: clamp(36px, 6vw, 64px);

	/* PORT FONT SIZES — Faza 3 additions */
	--fs-9:    9px;
	--fs-10:   10px;
	--fs-10-5: 10.5px;
	--fs-11-5: 11.5px;
	--fs-15-5: 15.5px;
	--fs-16:   16px;
	--fs-17:   17px;
	--fs-19:   19px;
	--fs-28:   28px;

	/* PORT SPACING — Faza 3 additions */
	--sp-5:   5px;
	--sp-7:   7px;
	--sp-11:  11px;
	--sp-40:  40px;
	--sp-52:  52px;
	--sp-80:  80px;
	--sp-88:  88px;
	--sp-104: 104px;
	--sp-120: 120px;

	/* Max-widths — Faza 3 additions */
	--mw-180:  180px;
	--mw-480:  480px;
	--mw-560:  560px;
	--mw-620:  620px;
	--mw-640:  640px;
	--mw-720:  720px;
	--mw-800:  800px;
	--mw-880:  880px;
	--mw-900:  900px;
	--mw-1000: 1000px;
	--mw-1180: 1180px;
}

/* ============================================================
   COMPONENT TOKENS — Faza 4.1 (service hubs: crypto EN/PL).
   Values lifted 1:1 from crypto-license.jsx inline styles + the
   hub page's <style> block (.reg, .u, responsive rules).
   ============================================================ */
:root {
	/* Fluid display sizes (per-element clamps from the prototype) */
	--t-hub-h1:       clamp(38px, 5.2vw, 76px);
	--t-hub-lead:     clamp(18px, 1.6vw, 22px);
	--t-hub-h2:       clamp(26px, 2.8vw, 38px);
	--t-hub-h2-route: clamp(28px, 3.2vw, 44px);
	--t-hub-h3:       clamp(19px, 1.9vw, 24px);

	/* Gold hairlines / washes on --ink (alpha steps from the prototype) */
	--gold-tint-04: rgba(175,150,52,0.04);
	--gold-tint-08: rgba(175,150,52,0.08);
	--gold-line-45: rgba(175,150,52,0.45);
	--gold-line-50: rgba(175,150,52,0.50);
	--gold-line-55: rgba(175,150,52,0.55);
	--gold-line-70: rgba(175,150,52,0.70);

	/* Hub hero dot mesh (CTA mesh reuses --cta-mesh-dot from Faza 3) */
	--hub-mesh-dot:         rgba(175,150,52,0.15);
	--hub-mesh-size:        32px;
	--hub-mesh-opacity:     0.45;
	--hub-mesh-opacity-cta: 0.5;

	/* Inverted borders / scrims — Faza 4.1 additions */
	--border-inv-ctl-3: rgba(255,255,255,0.20); /* FAQ toggle box */
	--scrim-bar:        rgba(10,10,10,0.96);    /* mobile CTA bar */

	/* Hard gold offset shadow — 6px step (captable, author portrait) */
	--shadow-card-gold-md: 6px 6px 0 0 var(--gold);
	/* 5px step — token classification cards (Faza 4.2, token-offerings.jsx) */
	--shadow-card-gold-sm: 5px 5px 0 0 var(--gold);

	/* PORT FONT SIZES — Faza 4.1 additions */
	--fs-9-5:  9.5px;
	--fs-12-5: 12.5px;
	--fs-14-5: 14.5px;
	--fs-16-5: 16.5px;
	--fs-24:   24px;

	/* PORT SPACING — Faza 4.1 additions */
	--sp-1:  1px;
	--sp-13: 13px;

	/* Max-widths — Faza 4.1 additions */
	--mw-210:  210px; /* TOC rail ≤1100px */
	--mw-250:  250px; /* TOC rail desktop */
	--mw-680:  680px;
	--mw-760:  760px;
	--mw-1100: 1100px;

	/* Faza 4.1b — status color for dark surfaces: --danger (#B23A2F)
	   drops under 3.2:1 on --ink; this lighter step keeps the same hue
	   family at readable contrast for CF7 validation text. */
	--danger-inv: #E06C5F;
}

/* ============================================================
   COMPONENT TOKENS — Faza 5.1 (single Insights post: hero, body
   typography for core blocks, authoring patterns, related cards).
   Values lifted 1:1 from article.jsx inline styles.
   ============================================================ */
:root {
	/* Fluid display sizes (per-element clamps from the prototype) */
	--t-post-h1:         clamp(40px, 6vw, 88px);
	--t-post-h2:         clamp(28px, 3vw, 40px);
	--t-post-h3:         clamp(20px, 2vw, 26px);
	--t-post-deck:       clamp(18px, 1.6vw, 22px);
	--t-post-quote:      clamp(20px, 2.4vw, 28px);
	--t-post-cta-h:      clamp(20px, 2.4vw, 28px);
	--t-post-related-h2: clamp(28px, 3.6vw, 48px);
	--t-post-ph:         clamp(28px, 5vw, 56px); /* related-card placeholder tag */

	/* 4px hard-offset border — pattern accent rules (callout / quote) */
	--bw-4: 4px;

	/* Related-card thumbnail plate */
	--mw-160:        160px;
	--post-thumb-min: 160px;

	/* Faza 5.1a — hero featured-image plate hard shadow (12px offset) */
	--shadow-card-gold-xl: 12px 12px 0 0 var(--gold);

	/* Faza 5.1a — post body grid columns: TOC rail (200px ≤1100) + share rail */
	--mw-200:   200px;
	--mw-share: 60px;
}

/* ============================================================
   COMPONENT TOKENS — Faza 5.2 (Insights/Blog listing: header,
   filter bar, featured card, grid cards, empty state). Values
   lifted 1:1 from insights-index.jsx inline styles.
   ============================================================ */
:root {
	/* Fluid display sizes */
	--t-ix-h1:            clamp(40px, 6vw, 78px);
	--t-ix-sub:            clamp(16px, 1.5vw, 19px);
	--t-ix-featured-title: clamp(28px, 2.8vw, 42px);

	/* Header inner max-width (920 — between --mw-900 and --mw-1000) */
	--mw-920: 920px;

	/* Featured card: grid ratio, visual-plate min-height, body padding */
	--ix-featured-primary:    1.05fr;
	--ix-featured-visual-min: 340px;
	--ix-featured-pad:        clamp(28px, 3vw, 44px);

	/* "FEATURED"/"WYRÓŻNIONE" ribbon backdrop — distinct scrim alpha from
	   --header-bg-glass (0.92); this one sits over a photo/plate, not chrome. */
	--ix-scrim: rgba(10,10,10,0.55);

	/* PORT FONT SIZES — Faza 5.2 additions */
	--fs-20: 20px;
}

/* ============================================================
   COMPONENT TOKENS — Faza 6.2 (About EN/PL — BESPOKE page).
   Values lifted 1:1 from components/bio.jsx inline styles + the
   "Bio - Mateusz Switalski.html" <style> block. Nothing here is
   shared with the service-hub layer.
   ============================================================ */
:root {
	/* Fluid display sizes (per-element clamps from the prototype) */
	--t-ab-name:     clamp(60px, 10vw, 168px); /* hero name, two lines */
	--t-ab-pull:     clamp(20px, 2vw, 28px);   /* hero pull quote */
	--t-ab-h2:       clamp(36px, 5vw, 64px);   /* experience / FAQ h2 */
	--t-ab-h3:       clamp(28px, 3vw, 40px);   /* what-i-do column heads */
	--t-ab-exp-n:    clamp(48px, 6vw, 72px);   /* experience card number */
	--t-ab-exp-h:    clamp(20px, 1.6vw, 24px); /* experience card h3 */
	--t-ab-cta-h2:   clamp(32px, 4.4vw, 56px); /* closing CTA h2 */
	--t-ab-backdrop: clamp(120px, 18vw, 280px);/* "WHAT I DO" wordmark */

	/* Portrait caption scrim (bio.jsx:103) */
	--about-portrait-scrim: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.97) 100%);

	/* Outlined type — stroke widths for the name line and the backdrop */
	--about-stroke-name:     2.5px;
	--about-stroke-backdrop: 1.5px;
	--about-backdrop-line:   rgba(255,255,255,0.05);

	/* Dot mesh — hero (28px grid) and closing CTA (32px grid) */
	--about-mesh-size:     28px;
	--about-mesh-size-cta: 32px;
	--about-mesh-opacity:     0.45;
	--about-mesh-opacity-cta: 0.5;

	/* Hard gold offset shadow — 14px step (portrait card) */
	--shadow-card-gold-2xl: 14px 14px 0 0 var(--gold);

	/* PORT SPACING — Faza 6.2 additions */
	--sp-4:  4px;
	--sp-76: 76px;

	/* Max-widths — Faza 6.2 additions */
	--mw-420: 420px; /* portrait card cap ≤920 */
	--mw-600: 600px;
	--mw-780: 780px;
	--mw-820: 820px;

	/* Side-label offset out of the hero grid's left gutter */
	--about-sidelabel-offset: -44px;

	/* Outlined name: second line drops by 0.22em of its own size (bio.jsx:49) */
	--about-name-line2-offset: 0.22em;

	/* Underline offset on the credentials registry link */
	--about-underline-offset: 3px;
}

/* ============================================================
   COMPONENT TOKENS — Faza 6.4 (Contact EN/PL — BESPOKE page).
   Values lifted 1:1 from components/contact.jsx inline styles +
   the "Contact - Mateusz Switalski.html" <style> block. The brief
   form itself reuses the Faza 4.1b .sl-cta tokens — nothing is
   redefined here for it.
   ============================================================ */
:root {
	/* Fluid display sizes (per-element clamps from the prototype) */
	--t-ct-h1:    clamp(48px, 8vw, 124px); /* hero */
	--t-ct-intro: clamp(17px, 1.5vw, 20px);
	--t-ct-h2:    clamp(30px, 4vw, 52px);  /* discovery call */
	--t-ct-h3:    clamp(28px, 3.5vw, 44px);/* direct channels */
	--t-ct-h4:    clamp(26px, 3vw, 40px);  /* firm details */

	/* Hero dot mesh (dot color reuses --cta-mesh-dot from Faza 3) */
	--contact-mesh-opacity: 0.5;

	/* Channel card hover wash */
	--contact-channel-hover: rgba(255,255,255,0.04);

	/* Third-party embed heights */
	--contact-embed-h: 620px; /* appointment scheduler */
	--contact-map-h:   420px;

	/* Map is desaturated to sit inside the brand palette */
	--contact-map-filter: grayscale(0.3) contrast(1.05);

	/* Underline offset on the scheduler fallback link */
	--contact-underline-offset: 3px;
}

/* ============================================================
   COMPONENT TOKENS — Faza 6.6 (Privacy Policy & Cookies EN/PL +
   Standard Terms of Service EN — BESPOKE legal-doc pages, shared
   template). Values lifted 1:1 from components/privacy.jsx inline
   styles + the "Privacy Policy…"/"Standard Terms of Service…" HTML
   shells' <style> blocks. The Terms shell is the superset (adds
   .pp-data/.pp-bank* for the firm/banking details table, and a
   taller .pp-toc with internal scroll for its 18 sections); this
   theme's shared legal.css is built from that superset so one
   stylesheet serves both documents without duplication.
   ============================================================ */
:root {
	/* Fluid display sizes */
	--t-legal-h1: clamp(48px, 8vw, 112px);
	--t-legal-intro: clamp(16px, 1.4vw, 19px);
	--t-legal-num: clamp(40px, 5vw, 64px);   /* ghost section numeral */
	--t-legal-title: clamp(24px, 2.6vw, 34px);

	/* 404 template (Faza 6.6) — oversized ghost glyph */
	--t-404-glyph: clamp(140px, 30vw, 400px);

	/* Hero dot mesh — same rgba step as the Faza 3 CTA mesh (--cta-mesh-dot) */
	--legal-mesh-opacity: 0.5;

	/* Ghost section numeral — barely-there white, not a semantic border color */
	--legal-num-color: var(--border-inv-row);

	/* .pp-bankname highlight (Terms §3) — no existing gold-tint step hits .18 */
	--gold-tint-18: rgba(175,150,52,0.18);

	/* .pp-bank-key label (Terms §3) — no existing white-alpha step hits .45 */
	--border-inv-hi-2: rgba(255,255,255,0.45);

	/* PORT SPACING — Faza 6.6 additions (bank sub-table grid columns +
	   the 404 stage's viewport-fill offset) */
	--sp-58:  58px;  /* .pp-bank-row key column */
	--sp-200: 200px; /* 404 main: min-height: calc(100vh - 200px) */

	/* Max-widths — Faza 6.6 addition */
	--mw-104: 104px; /* .pp-bank-acct label column */
}

/* Link defaults */
.t-link {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--gold);
	padding-bottom: 1px;
	transition: color .15s ease, border-color .15s ease;
}
.t-link:hover { color: var(--gold); border-color: var(--gold-deep); }