/*
 * CitySound — TOKENY DESIGN SYSTEMU
 * =====================================================================
 * JEDYNE ŹRÓDŁO WARTOŚCI wizualnych w motywie. Kolory, kroje, odstępy,
 * promienie, cienie, glass, ruch — wszystko tutaj, nigdzie indziej.
 *
 * Plik generowany z paczki design systemu (tools/build-tokens.py).
 * Aktualizacja designu = przegenerowanie tego pliku. Szablonów nie ruszamy.
 *
 * Dwa zestawy nazw, te same wartości:
 *   --wp--preset--* / --wp--custom--*  → komponenty z handoffu (cs-components.css)
 *   --brand, --sp-6, --r-card…         → prototyp i nowe szablony
 * =====================================================================
 */

:root {
  /* ---- WP presets: kolory ---- */
  --wp--preset--color--brand: #E01B14;
  --wp--preset--color--brand-strong: #B00807;
  --wp--preset--color--brand-soft: #FFF0EE;
  --wp--preset--color--red-300: #FF6A5E;
  --wp--preset--color--ink: #0B0B0D;
  --wp--preset--color--ink-800: #1E1E23;
  --wp--preset--color--text-body: #2C2C33;
  --wp--preset--color--text-muted: #6B6B77;
  --wp--preset--color--text-faint: #8E8E9A;
  --wp--preset--color--border-soft: #D8D8DE;
  --wp--preset--color--border-hairline: #EBEBEF;
  --wp--preset--color--sunken: #F5F5F7;
  --wp--preset--color--paper: #FAF9F9;
  --wp--preset--color--white: #FFFFFF;
  --wp--preset--color--ok: #1B8A5A;
  --wp--preset--color--warn: #C97A05;
  --wp--preset--color--gold: #D4A94A;
  --wp--preset--color--gold-strong: #B8892E;

  /* ---- WP presets: gradienty ---- */
  --wp--preset--gradient--heart: radial-gradient(circle at 50% 42%,#FF3A2C 0%,#E01B14 42%,#9C0806 100%);
  --wp--preset--gradient--brand: linear-gradient(135deg,#F03A2E 0%,#C9110D 100%);
  --wp--preset--gradient--ink: linear-gradient(160deg,#1E1E23 0%,#0B0B0D 100%);
  --wp--preset--gradient--gold: linear-gradient(135deg,#F1D68A 0%,#D4A94A 48%,#B8892E 100%);
  --wp--preset--gradient--protect: linear-gradient(to top,rgba(11,11,13,.86) 0%,rgba(11,11,13,.42) 38%,rgba(11,11,13,0) 100%);

  /* ---- WP presets: odstępy ---- */
  --wp--preset--spacing--1: 4px;
  --wp--preset--spacing--2: 8px;
  --wp--preset--spacing--3: 12px;
  --wp--preset--spacing--4: 16px;
  --wp--preset--spacing--5: 20px;
  --wp--preset--spacing--6: 24px;
  --wp--preset--spacing--7: 32px;
  --wp--preset--spacing--8: 40px;
  --wp--preset--spacing--9: 48px;
  --wp--preset--spacing--10: 64px;
  --wp--preset--spacing--11: 80px;
  --wp--preset--spacing--12: 112px;
  --wp--preset--spacing--section: clamp(64px, 8vw, 112px);

  /* ---- WP presets: rozmiary pisma ---- */
  --wp--preset--font-size--micro: 11px;
  --wp--preset--font-size--caption: 13px;
  --wp--preset--font-size--small: 15px;
  --wp--preset--font-size--body: 16px;
  --wp--preset--font-size--lead: 19px;
  --wp--preset--font-size--h4: 20px;
  --wp--preset--font-size--h3: 24px;
  --wp--preset--font-size--h2: 32px;
  --wp--preset--font-size--h1: 40px;
  --wp--preset--font-size--display-2: clamp(36px, 4vw, 56px);
  --wp--preset--font-size--display-1: clamp(44px, 5.4vw, 76px);

  /* ---- WP presets: rodziny pisma ---- */
  --wp--preset--font-family--display: "Montserrat", system-ui, sans-serif;
  --wp--preset--font-family--body: "Manrope", system-ui, sans-serif;

  /* ---- WP presets: cienie ---- */
  --wp--preset--shadow--1: 0 1px 2px rgba(11,11,13,.05),0 1px 1px rgba(11,11,13,.04);
  --wp--preset--shadow--2: 0 4px 12px rgba(11,11,13,.06),0 1px 2px rgba(11,11,13,.04);
  --wp--preset--shadow--3: 0 12px 28px rgba(11,11,13,.09),0 2px 6px rgba(11,11,13,.05);
  --wp--preset--shadow--4: 0 24px 56px rgba(11,11,13,.13),0 4px 12px rgba(11,11,13,.06);
  --wp--preset--shadow--5: 0 40px 96px rgba(11,11,13,.18),0 8px 24px rgba(11,11,13,.08);
  --wp--preset--shadow--brand: 0 12px 28px rgba(224,27,20,.28);
  --wp--preset--shadow--gold-glow: 0 0 0 1px rgba(212,169,74,.45),0 12px 40px rgba(212,169,74,.22),0 32px 80px rgba(11,11,13,.35);

  /* ---- WP custom ---- */
  --wp--custom--radius--xs: 8px;
  --wp--custom--radius--sm: 12px;
  --wp--custom--radius--md: 18px;
  --wp--custom--radius--lg: 24px;
  --wp--custom--radius--xl: 32px;
  --wp--custom--radius--2xl: 40px;
  --wp--custom--radius--3xl: 56px;
  --wp--custom--radius--pill: 999px;
  --wp--custom--glass--light-bg: rgba(255,255,255,.62);
  --wp--custom--glass--light-border: rgba(255,255,255,.72);
  --wp--custom--glass--light-blur: saturate(150%) blur(22px);
  --wp--custom--glass--frost-bg: rgba(255,255,255,.86);
  --wp--custom--glass--frost-border: rgba(255,255,255,.9);
  --wp--custom--glass--frost-blur: saturate(140%) blur(28px);
  --wp--custom--glass--dark-bg: rgba(19,19,22,.52);
  --wp--custom--glass--dark-border: rgba(255,255,255,.18);
  --wp--custom--glass--dark-blur: saturate(130%) blur(24px);
  --wp--custom--glass--brand-bg: rgba(224,27,20,.34);
  --wp--custom--glass--brand-border: rgba(255,255,255,.34);
  --wp--custom--glass--brand-blur: saturate(160%) blur(20px);
  --wp--custom--glass--highlight: inset 0 1px 0 rgba(255,255,255,.75);
  --wp--custom--glass--shadow: 0 16px 40px rgba(11,11,13,.16);
  --wp--custom--motion--ease-out: cubic-bezier(.22,1,.36,1);
  --wp--custom--motion--fast: 120ms;
  --wp--custom--motion--base: 200ms;
  --wp--custom--motion--slow: 340ms;
  --wp--custom--motion--reveal: 640ms;
  --wp--custom--line-height--tight: 1.02;
  --wp--custom--line-height--snug: 1.14;
  --wp--custom--line-height--heading: 1.24;
  --wp--custom--line-height--body: 1.62;
  --wp--custom--line-height--loose: 1.75;
  --wp--custom--letter-spacing--display: -.03em;
  --wp--custom--letter-spacing--heading: -.015em;
  --wp--custom--letter-spacing--eyebrow: .16em;
  --wp--custom--letter-spacing--mark: .28em;
}

/* ---- semantyczne: colors.css ---- */
:root{
/* --- Brand core (sampled from the CitySound logotype) --- */
--cs-red-900:#7A0604;--cs-red-800:#9C0806;--cs-red-700:#B00807;--cs-red-600:#C9110D;
--cs-red-500:#E01B14;--cs-red-400:#F03A2E;--cs-red-300:#FF6A5E;--cs-red-200:#FFB3AB;
--cs-red-100:#FFD9D5;--cs-red-050:#FFF0EE;
--cs-ink-950:#0B0B0D;--cs-ink-900:#131316;--cs-ink-800:#1E1E23;--cs-ink-700:#2C2C33;
--cs-ink-600:#4A4A55;--cs-ink-500:#6B6B77;--cs-ink-400:#8E8E9A;--cs-ink-300:#B6B6BF;
--cs-ink-200:#D8D8DE;--cs-ink-100:#EBEBEF;--cs-ink-050:#F5F5F7;
--cs-paper:#FAF9F9;--cs-white:#FFFFFF;

/* --- Semantic --- */
--brand:var(--cs-red-500);--brand-strong:var(--cs-red-700);--brand-soft:var(--cs-red-050);
--brand-contrast:#FFFFFF;
--text-strong:var(--cs-ink-950);--text-body:var(--cs-ink-700);--text-muted:var(--cs-ink-500);
--text-faint:var(--cs-ink-400);--text-on-brand:#FFFFFF;--text-on-dark:#FFFFFF;
--text-on-dark-muted:rgba(255,255,255,.68);
--surface-page:var(--cs-paper);--surface-card:var(--cs-white);--surface-sunken:var(--cs-ink-050);
--surface-dark:var(--cs-ink-950);--surface-brand:var(--cs-red-500);
--border-hairline:var(--cs-ink-100);--border-soft:var(--cs-ink-200);--border-strong:var(--cs-ink-300);
--border-on-dark:rgba(255,255,255,.16);
--focus-ring:rgba(224,27,20,.38);

/* --- Status --- */
--ok:#1B8A5A;--ok-soft:#E6F5EE;--warn:#C97A05;--warn-soft:#FFF3DF;
--danger:var(--cs-red-600);--danger-soft:var(--cs-red-050);--info:#2A5FBE;--info-soft:#EAF0FC;

/* --- Gold accent — "CitySound Special": reserved for the single highlighted tier / premium marker --- */
--gold:#D4A94A;--gold-strong:#B8892E;--gold-soft:#FBF3E0;
--gold-border:rgba(212,169,74,.55);--gold-glow:0 0 0 1px rgba(212,169,74,.5),0 0 24px 4px rgba(212,169,74,.22),0 0 72px 12px rgba(212,169,74,.14),0 24px 56px rgba(11,11,13,.3);
--grad-gold:linear-gradient(135deg,#F1D68A 0%,#D4A94A 48%,#B8892E 100%);

/* --- Signature gradients (the heart behind the skyline) --- */
--grad-heart:radial-gradient(circle at 50% 42%,#FF3A2C 0%,#E01B14 42%,#9C0806 100%);
--grad-brand:linear-gradient(135deg,#F03A2E 0%,#C9110D 100%);
--grad-ink:linear-gradient(160deg,#1E1E23 0%,#0B0B0D 100%);
--grad-protect:linear-gradient(to top,rgba(11,11,13,.86) 0%,rgba(11,11,13,.42) 38%,rgba(11,11,13,0) 100%);
}

/* ---- semantyczne: typography.css ---- */
:root{
--font-display:"Montserrat",system-ui,sans-serif;
--font-body:"Manrope",system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;

--fs-display-1:clamp(44px,5.4vw,76px);
--fs-display-2:clamp(36px,4vw,56px);
--fs-h1:40px;
--fs-h2:32px;
--fs-h3:24px;
--fs-h4:20px;
--fs-lead:19px;
--fs-body:16px;
--fs-body-sm:15px;
--fs-caption:13px;
--fs-micro:11px;

--lh-tight:1.02;
--lh-snug:1.14;
--lh-heading:1.24;
--lh-body:1.62;
--lh-loose:1.75;

--ls-display:-.03em;
--ls-heading:-.015em;
--ls-body:0;
--ls-eyebrow:.16em;
--ls-mark:.28em;

--fw-body:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-display:800;
--fw-black:900;
}

/* ---- semantyczne: spacing.css ---- */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;
--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:112px;--sp-13:160px;
--gutter:24px;--section-y:clamp(64px,8vw,112px);
--container:1240px;--container-narrow:880px;--container-wide:1440px;
}

/* ---- semantyczne: radius.css ---- */
:root{
/* Everything is soft. Nothing in CitySound has a sharp 0px corner except
   full-bleed media edges. */
--r-xs:8px;
--r-sm:12px;
--r-md:18px;
--r-lg:24px;
--r-xl:32px;
--r-2xl:40px;
--r-3xl:56px;
--r-pill:999px;
--r-control:var(--r-pill);   /* buttons, chips, inputs, tabs */
--r-card:var(--r-lg);        /* content cards */
--r-panel:var(--r-xl);       /* glass panels, modals, hero cards */
--r-media:var(--r-md);       /* images inside cards */
--r-section:var(--r-3xl);    /* full-bleed section blocks */
}

/* ---- semantyczne: elevation.css ---- */
:root{
/* Shadows are wide, low-opacity and warm-neutral — never black at high alpha. */
--sh-1:0 1px 2px rgba(11,11,13,.05),0 1px 1px rgba(11,11,13,.04);
--sh-2:0 4px 12px rgba(11,11,13,.06),0 1px 2px rgba(11,11,13,.04);
--sh-3:0 12px 28px rgba(11,11,13,.09),0 2px 6px rgba(11,11,13,.05);
--sh-4:0 24px 56px rgba(11,11,13,.13),0 4px 12px rgba(11,11,13,.06);
--sh-5:0 40px 96px rgba(11,11,13,.18),0 8px 24px rgba(11,11,13,.08);
--sh-brand:0 12px 28px rgba(224,27,20,.28);
--sh-brand-hover:0 16px 36px rgba(224,27,20,.34);
--sh-inset-hairline:inset 0 0 0 1px rgba(255,255,255,.55);
--sh-inset-top:inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---- semantyczne: glass.css ---- */
:root{
/* Glass is the signature surface: a blurred, semi-opaque plate with a bright
   hairline edge and a top highlight. Use it only over photography, video or a
   colour field — never over flat paper (it reads as dirty grey). */
--glass-light-bg:rgba(255,255,255,.62);
--glass-light-border:rgba(255,255,255,.72);
--glass-light-blur:saturate(150%) blur(22px);

--glass-frost-bg:rgba(255,255,255,.86);
--glass-frost-border:rgba(255,255,255,.9);
--glass-frost-blur:saturate(140%) blur(28px);

--glass-dark-bg:rgba(19,19,22,.52);
--glass-dark-border:rgba(255,255,255,.18);
--glass-dark-blur:saturate(130%) blur(24px);

--glass-brand-bg:rgba(224,27,20,.34);
--glass-brand-border:rgba(255,255,255,.34);
--glass-brand-blur:saturate(160%) blur(20px);

--glass-shadow:0 16px 40px rgba(11,11,13,.16);
--glass-highlight:inset 0 1px 0 rgba(255,255,255,.75);
}

/* ---- semantyczne: motion.css ---- */
:root{
--ease-out:cubic-bezier(.22,1,.36,1);      /* default: quick out, long settle */
--ease-in-out:cubic-bezier(.65,0,.35,1);
--ease-soft:cubic-bezier(.4,0,.2,1);
--dur-fast:120ms;
--dur-base:200ms;
--dur-slow:340ms;
--dur-reveal:640ms;
--t-control:all var(--dur-base) var(--ease-out);
--t-card:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);
--lift-card:translateY(-4px);
--press-scale:.975;
}