:root {
  --stopa-color-bg: #f5f1e7;
  --stopa-color-bg-elevated: #fbf8f1;
  --stopa-color-surface: #ffffff;
  --stopa-color-surface-muted: #faf7ef;
  --stopa-color-surface-strong: #f1ece3;
  --stopa-color-field: rgba(251, 248, 241, 0.96);
  --stopa-color-field-focus: rgba(255, 255, 255, 0.98);
  --stopa-color-search-surface: rgba(255, 255, 255, 0.98);
  --stopa-color-search-surface-focus: rgba(255, 250, 236, 0.98);
  --stopa-color-scroll-track: rgba(248, 243, 231, 0.96);
  --stopa-color-scroll-thumb: rgba(223, 158, 0, 0.68);
  --stopa-color-scroll-thumb-hover: rgba(223, 158, 0, 0.88);
  --stopa-color-text: #131313;
  --stopa-color-text-soft: rgba(19, 19, 19, 0.72);
  --stopa-color-text-faint: rgba(19, 19, 19, 0.52);
  --stopa-color-line: rgba(19, 19, 19, 0.08);
  --stopa-color-line-strong: rgba(19, 19, 19, 0.18);
  --stopa-color-dot: rgba(19, 19, 19, 0.1);

  --stopa-color-brand-50: #fff9db;
  --stopa-color-brand-100: #fff1b5;
  --stopa-color-brand-300: #ffd54a;
  --stopa-color-brand-500: #ffc400;
  --stopa-color-brand-700: #df9e00;

  --stopa-color-info: #2f73ff;
  --stopa-color-success: #2f8f58;
  --stopa-color-warning: #b56a00;
  --stopa-color-danger: #c2473f;

  --stopa-color-product-accent: var(--stopa-color-brand-500);
  --stopa-color-product-accent-soft: var(--stopa-color-brand-50);
  --stopa-color-product-accent-strong: var(--stopa-color-brand-700);

  --stopa-font-display: "Public Sans", "Inter", "Segoe UI", sans-serif;
  --stopa-font-ui: "Inter", "Segoe UI", sans-serif;
  --stopa-font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --stopa-text-display-1: 800 clamp(2.4rem, 4.6vw, 4.6rem) / 0.94 var(--stopa-font-display);
  --stopa-text-display-2: 800 clamp(1.9rem, 3vw, 3rem) / 0.96 var(--stopa-font-display);
  --stopa-text-title-1: 750 1.55rem / 1.05 var(--stopa-font-display);
  --stopa-text-title-2: 750 1.18rem / 1.15 var(--stopa-font-display);
  --stopa-text-kpi: 800 clamp(2rem, 2.6vw, 3.2rem) / 0.9 var(--stopa-font-display);
  --stopa-text-body-lg: 560 1.05rem / 1.45 var(--stopa-font-ui);
  --stopa-text-body: 510 0.97rem / 1.45 var(--stopa-font-ui);
  --stopa-text-body-sm: 510 0.88rem / 1.4 var(--stopa-font-ui);
  --stopa-text-label: 700 0.75rem / 1.2 var(--stopa-font-ui);
  --stopa-text-mono: 520 0.8rem / 1.4 var(--stopa-font-mono);

  --stopa-space-1: 0.25rem;
  --stopa-space-2: 0.5rem;
  --stopa-space-3: 0.75rem;
  --stopa-space-4: 1rem;
  --stopa-space-5: 1.25rem;
  --stopa-space-6: 1.5rem;
  --stopa-space-7: 2rem;
  --stopa-space-8: 2.5rem;
  --stopa-space-9: 3rem;
  --stopa-space-10: 4rem;

  --stopa-radius-xs: 0.5rem;
  --stopa-radius-sm: 0.75rem;
  --stopa-radius-md: 1rem;
  --stopa-radius-lg: 1.25rem;
  --stopa-radius-xl: 1.75rem;
  --stopa-radius-pill: 999px;

  --stopa-border-soft: 1px solid var(--stopa-color-line);
  --stopa-border-strong: 1px solid var(--stopa-color-line-strong);
  --stopa-rail-width: 0.375rem;
  --stopa-rail-gap: 1rem;

  --stopa-shadow-card: 0 10px 22px rgba(17, 17, 17, 0.06), 0 2px 8px rgba(17, 17, 17, 0.04);
  --stopa-shadow-lift: 0 16px 36px rgba(17, 17, 17, 0.1), 0 4px 12px rgba(17, 17, 17, 0.05);
  --stopa-shadow-overlay: 0 24px 64px rgba(17, 17, 17, 0.16), 0 4px 18px rgba(17, 17, 17, 0.08);
  --stopa-shadow-search: 0 14px 30px rgba(17, 17, 17, 0.07), 0 3px 10px rgba(17, 17, 17, 0.045);

  --stopa-motion-fast: 140ms ease;
  --stopa-motion-base: 180ms ease;
  --stopa-layout-max: 86rem;
  --stopa-layout-reading: 58rem;
  --stopa-layout-gutter: clamp(1rem, 2vw, 1.5rem);
  --stopa-topbar-height: 4rem;
  --stopa-topbar-offset: 1rem;
  --stopa-control-height: 2.25rem;
  --stopa-search-height: 3.5rem;
}

[data-product="zmluvy"],
[data-product="majetkovy-kompas"],
[data-product="agent-wall-demo"] {
  --stopa-color-product-accent: var(--stopa-color-brand-500);
  --stopa-color-product-accent-soft: var(--stopa-color-brand-50);
  --stopa-color-product-accent-strong: var(--stopa-color-brand-700);
}