/* JobsTrail design-system tokeny (přenos HitPrace.cz DS). Platí jen pod body.hp-ds
   (gate lib/jt-ds.php: $JT_DS_ENABLED v country settings.php, null = jen staging).
   Font je systémový sans, bez dalšího webfontu. Hodnoty = reference HitPrace hp-ds-tokens.css. */

body.hp-ds {
  --hp-ds-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Barvy podle role */
  --hp-ds-color-page: #eaf0f7;
  --hp-ds-color-surface: #ffffff;
  --hp-ds-color-surface-2: #f7f9fc;
  --hp-ds-color-hero: #dceefb;
  --hp-ds-color-footer: #f6f8fb;
  --hp-ds-color-ink: #1a2430;
  --hp-ds-color-ink-2: #2f3c4a;
  --hp-ds-color-muted: #5c6b7a;
  --hp-ds-color-subtle: #8593a1;
  --hp-ds-color-border: #d5dee8;
  --hp-ds-color-border-strong: #c2cfdd;
  --hp-ds-color-divider: #eef2f6;
  --hp-ds-color-brand: #1a7fcc;
  --hp-ds-color-brand-hover: #1369ad;
  --hp-ds-color-brand-active: #0f5a95;
  --hp-ds-color-brand-soft: #e7f3fb;
  --hp-ds-color-brand-line: #b7d4e8;
  --hp-ds-color-brand-soft-hover: #d7ebf8;
  --hp-ds-color-hero-line: #c7e0f2;
  --hp-ds-color-link: #0a6fc2;
  --hp-ds-color-link-hover: #07579a;
  --hp-ds-color-link-visited: #6b45b5;
  --hp-ds-color-fav: #d21f3c;
  --hp-ds-color-fav-soft: #fff6f7;
  --hp-ds-color-fav-line: #f0b4be;
  --hp-ds-color-success: #2d6a4f;
  --hp-ds-color-success-soft: #eef6f1;
  --hp-ds-color-badge: #f1f4f8;
  --hp-ds-color-badge-ink: #4d5d6d;
  --hp-ds-color-focus: rgba(26, 127, 204, 0.2);

  /* Interakční jazyk: hlavní akce (CTA) je teplá HitPrace červená, odkazy sytě modré */
  --hp-ds-color-cta: #d9362a;
  --hp-ds-color-cta-hover: #bb2a1f;
  --hp-ds-color-cta-active: #a3241a;
  --hp-ds-cta-press: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  --hp-ds-link-underline: rgba(10, 111, 194, 0.5);
  --hp-ds-link-underline-offset: 3px;
  --hp-ds-card-hover-bg: #eaf3fd;
  --hp-ds-card-press-bg: #dcecfb;
  --hp-ds-color-accent-warm: #fff4d6;
  --hp-ds-color-accent-warm-line: #f3d38a;

  /* Sémantické štítky (badge, filtry) */
  --hp-ds-badge-green-bg: #e7f6ec;
  --hp-ds-badge-green-ink: #23703f;
  --hp-ds-badge-money-bg: #d4f1de;
  --hp-ds-badge-money-ink: #0f6332;
  --hp-ds-badge-blue-bg: #e2effc;
  --hp-ds-badge-blue-ink: #0b5ea6;
  --hp-ds-badge-amber-bg: #fff0d2;
  --hp-ds-badge-amber-ink: #8f5300;
  --hp-ds-badge-rose-bg: #fde6eb;
  --hp-ds-badge-rose-ink: #b01f3d;
  --hp-ds-badge-violet-bg: #eee8fd;
  --hp-ds-badge-violet-ink: #5536b5;
  --hp-ds-color-trust: #0e8a74;
  --hp-ds-color-trust-soft: #e2f5f0;

  /* Hyperlink Heat: navy identity kotva + hero úroveň štítků + mzda na tmavé */
  --hp-ds-color-navy: #10304f;
  --hp-ds-color-navy-deep: #0b2238;
  --hp-ds-color-navy-ink: #f4f9fd;
  --hp-ds-color-navy-muted: #a9c3da;
  --hp-ds-color-navy-link: #cfe8fb;
  --hp-ds-color-navy-line: rgba(255, 255, 255, 0.16);
  --hp-ds-color-pay-on-dark: #8fe6b4;
  --hp-ds-badge-hero-money-bg: #1c8a4c;
  --hp-ds-badge-hero-money-ink: #ffffff;
  --hp-ds-badge-hero-amber-bg: #ffd166;
  --hp-ds-badge-hero-amber-ink: #4a3200;

  /* Vrstvy */
  --hp-ds-z-search: 3;
  --hp-ds-z-dropdown: 30;
  --hp-ds-z-sticky: 40;
  --hp-ds-z-push: 50;
  --hp-ds-z-menu: 70;
  --hp-ds-z-focus: 90;

  /* Tvary */
  --hp-ds-radius-xs: 6px;
  --hp-ds-radius-sm: 10px;
  --hp-ds-radius-md: 14px;
  --hp-ds-radius-pill: 999px;
  --hp-ds-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --hp-ds-shadow-card-hover: 0 8px 20px rgba(16, 24, 40, 0.07);
  --hp-ds-shadow-pop: 0 12px 28px rgba(16, 24, 40, 0.16);

  /* Mezery */
  --hp-ds-space-1: 4px;
  --hp-ds-space-2: 8px;
  --hp-ds-space-3: 12px;
  --hp-ds-space-4: 16px;
  --hp-ds-space-5: 24px;
  --hp-ds-space-6: 32px;
  --hp-ds-section-gap: 28px;
  --hp-ds-container: 1120px;

  /* Typografie — mobil (výchozí), desktop přepisuje níže */
  --hp-ds-font-hero: 26px;
  --hp-ds-font-h1: 22px;
  --hp-ds-font-h2: 20px;
  --hp-ds-font-h3: 17px;
  --hp-ds-font-title: 16px;
  --hp-ds-font-pay: 15px;
  --hp-ds-font-body: 15px;
  --hp-ds-font-ui: 14px;
  --hp-ds-font-meta: 13px;
  --hp-ds-font-small: 12px;

  /* Ovládací prvky */
  --hp-ds-control-h: 44px;
  --hp-ds-button-h: 48px;
}

@media (min-width: 768px) {
  body.hp-ds {
    --hp-ds-section-gap: 36px;
    --hp-ds-font-hero: 38px;
    --hp-ds-font-h1: 28px;
    --hp-ds-font-h2: 22px;
    --hp-ds-font-h3: 18px;
    --hp-ds-control-h: 50px;
  }
}