:root {
  --pm-black: #0A0A0B;
  --pm-ink: #15141A;
  --pm-white: #F7F5F2;
  --pm-pure-white: #FFFFFF;

  --pm-purple-900: #3D0049;
  --pm-purple-800: #56006B;
  --pm-purple-700: #73008B;
  --pm-purple-600: #87009C;
  --pm-purple-500: #9D14B0;
  --pm-purple-400: #C400AD;
  --pm-purple-300: #D562C9;
  --pm-purple-200: #E8B8F0;
  --pm-purple-100: #F4DEF8;

  --pm-gradient-brand: linear-gradient(135deg, #73008B 0%, #C400AD 100%);
  --pm-gradient-deep: radial-gradient(circle at 30% 20%, #3D0049 0%, #0A0A0B 70%);

  --pm-gray-100: #F2F2F4;
  --pm-gray-200: #E1E1E5;
  --pm-gray-300: #C7C7CD;
  --pm-gray-400: #9D9DA6;
  --pm-gray-500: #6F6F78;
  --pm-gray-600: #4D4D55;
  --pm-gray-700: #34343A;
  --pm-gray-800: #1F1F24;
  --pm-gray-900: #121215;

  --pm-accent: #E5FF3A;

  --ff-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-100: 0.75rem;
  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.333rem;
  --fs-600: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-700: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-800: clamp(2.75rem, 2rem + 3.5vw, 5rem);
  --fs-900: clamp(4rem, 2rem + 10vw, 12rem);
  /* Page titles below the home hero (plan 31, Р5): 3–6rem — fs-900 reached 11rem and filled the first screen. */
  --fs-850: clamp(3rem, 1.5rem + 5vw, 6rem);

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --ls-display: -0.03em;
  --ls-body: -0.005em;
  --ls-eyebrow: 0.18em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 192px;
  --sp-16: 256px;
  --sp-section: clamp(6rem, 12vw, 12rem);

  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 600ms;
  --dur-hero: 1200ms;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --z-base: 0;
  --z-rule: 5;
  --z-content: 10;
  --z-nav: 80;
  --z-hellobar: 85;
  --z-consent: 95;
  --z-overlay: 100;
  --z-overlay-top: 110;
  --z-cursor: 200;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(196, 0, 173, 0.4), 0 0 32px rgba(196, 0, 173, 0.25);

  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-color-accent: var(--pm-purple-500);

  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-lg: 880px;
  --bp-xl: 1024px;
  --bp-2xl: 1280px;
  --bp-3xl: 1440px;

  --op-0: 0;
  --op-10: 0.1;
  --op-20: 0.2;
  --op-30: 0.3;
  --op-40: 0.4;
  --op-50: 0.5;
  --op-60: 0.6;
  --op-70: 0.7;
  --op-80: 0.8;
  --op-90: 0.9;
  --op-100: 1;

  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-stroke: 1.5;
}

/* Theme roles (plan 31, §1.3). Components read roles, not palette steps.
   Dark values are the palette steps the site used before, one to one, so the dark theme and the Bay apps
   (no data-site-theme) render as they did. Light values apply only on pages with <html data-site-theme>:
   with data-theme="light", or with no data-theme while the system asks for light.
   .hero and .dark-window (the marquee band) are a dark window in both themes (Q-2 "a"), so they re-declare the dark roles;
   so does the header while it is clear over the home hero (nav.css, plan 31 Р6). */
:root,
.hero,
.dark-window,
.js .nav[data-clear]:not([data-solid]):not([data-panel-open]) {
  --c-field: var(--pm-black);
  --c-surface: var(--pm-ink);
  --c-raise: var(--pm-gray-900);
  --c-raise-2: var(--pm-gray-800);
  --c-line: var(--pm-gray-700);
  --c-line-2: var(--pm-gray-600);
  --c-control-line: var(--pm-gray-500);
  --c-muted: var(--pm-gray-400);
  --c-text-3: var(--pm-gray-300);
  --c-text-2: var(--pm-gray-200);
  --c-text-1: var(--pm-gray-100);
  --c-text: var(--pm-white);
  --c-accent-soft: var(--pm-purple-100);
  --c-accent-2: var(--pm-purple-200);
  --c-accent: var(--pm-purple-300);
  --c-mark: var(--pm-purple-400);
  --c-mark-2: var(--pm-purple-500);
  --c-error: #FF7B9C;
  --c-focus: var(--pm-accent);
  --c-glow-deep: var(--pm-gradient-deep);
  --c-tint: var(--pm-purple-900);
  --border-color-subtle: var(--c-raise-2);
  --border-color-base: var(--c-line);
  --border-color-strong: var(--c-control-line);
}

/* Light: warm paper with purple ink. Contrast of each pair — docs/active/31-audit.md §3 and the plan's
   "Замеры" (Р2). Lime on paper is 1.06:1, so focus turns purple here. */
[data-site-theme][data-theme="light"] {
  --c-field: #EFEBE5;
  --c-surface: #F8F6F2;
  --c-raise: #F4F1EC;
  --c-raise-2: #E5E0D9;
  --c-line: #D6D1CA;
  --c-line-2: #BDB7AF;
  --c-control-line: #7E7E87;
  --c-muted: #5C5C65;
  --c-text-3: #45444C;
  --c-text-2: #2C2B32;
  --c-text-1: #1E1D23;
  --c-text: var(--pm-ink);
  --c-accent-soft: var(--pm-purple-800);
  --c-accent-2: var(--pm-purple-600);
  --c-accent: var(--pm-purple-700);
  --c-mark: var(--pm-purple-600);
  --c-mark-2: var(--pm-purple-500);
  --c-error: #A3123F;
  --c-focus: var(--pm-purple-700);
  --c-glow-deep: radial-gradient(circle at 30% 20%, var(--pm-purple-100) 0%, #EFEBE5 70%);
  --c-tint: var(--pm-purple-100);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  [data-site-theme]:not([data-theme="dark"]) {
    --c-field: #EFEBE5;
    --c-surface: #F8F6F2;
    --c-raise: #F4F1EC;
    --c-raise-2: #E5E0D9;
    --c-line: #D6D1CA;
    --c-line-2: #BDB7AF;
    --c-control-line: #7E7E87;
    --c-muted: #5C5C65;
    --c-text-3: #45444C;
    --c-text-2: #2C2B32;
    --c-text-1: #1E1D23;
    --c-text: var(--pm-ink);
    --c-accent-soft: var(--pm-purple-800);
    --c-accent-2: var(--pm-purple-600);
    --c-accent: var(--pm-purple-700);
    --c-mark: var(--pm-purple-600);
    --c-mark-2: var(--pm-purple-500);
    --c-error: #A3123F;
    --c-focus: var(--pm-purple-700);
    --c-glow-deep: radial-gradient(circle at 30% 20%, var(--pm-purple-100) 0%, #EFEBE5 70%);
  --c-tint: var(--pm-purple-100);
    color-scheme: light;
  }
}
[data-site-theme] { color-scheme: light dark; }
[data-site-theme][data-theme="dark"] { color-scheme: dark; }
.hero,
.dark-window,
.js .nav[data-clear]:not([data-solid]):not([data-panel-open]) { color-scheme: dark; }