/* saly.pl – design system Saly: one file for every page (design system https://claude.ai/artifact/WqQancpWiQ8Y2b7NxaDBCr, 2026-10-22).
   Tokens as CSS variables, then the components the builders mark with ds-* classes. A colour or a button changes here, not in each
   page. Pages keep their own layout inline (sizes, grids, spacing) and refer to these tokens with var(--ds-*). Components are scoped to
   the HTML pages (body .saly-page .gk), one class more than the page's base CSS (.gk a, .gk :where(h1,…)). */
:root{
  /* surfaces and text (light: platform and brand) */
  --ds-surface:#fff;--ds-surface-alt:#F7F6FC;--ds-grey-tile:#F1F0F5;
  --ds-ink:#1D1B2E;--ds-ink-2:#4A475C;--ds-muted:#6B6880;--ds-faint:#A9A6BC;
  --ds-line:#ECEAF4;--ds-line-2:#E4E1F0;
  /* the one Saly violet */
  --ds-accent:#816DFC;--ds-accent-strong:#5A4CB0;--ds-accent-hover:#5A4CB0;--ds-accent-tint:#EFEBFF;--ds-lavender:#DCD6FF;--ds-lilac:#C9C0FB;
  /* dark scenes (ML/BI) and dark cards */
  --ds-night:#0D0B14;--ds-night-raised:#17151F;--ds-night-tile:rgba(255,255,255,.04);--ds-night-track:rgba(255,255,255,.06);
  --ds-night-accent-tint:rgba(129,109,252,.13);--ds-night-line:rgba(169,155,255,.18);--ds-on-night:#F6F4FE;--ds-on-night-2:#B9B3D6;--ds-on-night-muted:#8C86AD;--ds-on-night-accent:#A99BFF;
  /* data and status (meaning, never decoration) */
  --ds-up:#34CE97;--ds-down:#FF7A7A;--ds-warn-dot:#F5B44A;--ds-ok:#1B8A5E;--ds-ok-ink:#1B6B4F;--ds-ok-bg:#E9F8F1;
  --ds-critical:#B4232A;--ds-critical-bg:#FDECEC;--ds-warning:#8F5506;--ds-warning-bg:#FFF3DD;
  /* type */
  --ds-font-display:'Poppins',system-ui,sans-serif;--ds-font-sans:'Roboto',system-ui,sans-serif;--ds-font-mono:'Roboto Mono',ui-monospace,monospace;
}

/* eyebrow over a heading */
body .saly-page .gk .ds-eyebrow{font:600 12px/1.4 var(--ds-font-display);text-transform:uppercase;letter-spacing:.16em;color:var(--ds-accent-strong)}
body .saly-page .gk .ds-eyebrow-d{color:var(--ds-on-night-accent)}

/* headings: the size stays on the page (its layout), weight, line height and tracking come from here */
body .saly-page .gk .ds-h1{margin:0;font-family:var(--ds-font-display);font-weight:700;line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
body .saly-page .gk .ds-h2{margin:0;font-family:var(--ds-font-display);font-weight:600;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
body .saly-page .gk .ds-h2s{margin:0;font-family:var(--ds-font-display);font-weight:600;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}

/* buttons: one primary per block; light and ghost-d on dark */
body .saly-page .gk .ds-btn{display:flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border:1px solid transparent;border-radius:999px;
  font:500 15px/1 var(--ds-font-sans);white-space:nowrap;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
body .saly-page .gk .ds-btn-primary{background:var(--ds-accent);color:#fff}
body .saly-page .gk .ds-btn-primary:hover{background:var(--ds-accent-hover);color:#fff}
body .saly-page .gk .ds-btn-ghost{background:#fff;color:var(--ds-ink);border-color:rgba(29,27,46,.18)}
body .saly-page .gk .ds-btn-ghost:hover{border-color:var(--ds-ink);color:var(--ds-ink)}
body .saly-page .gk .ds-btn-light{background:var(--ds-on-night);color:var(--ds-ink)}
body .saly-page .gk .ds-btn-light:hover{background:#fff;color:var(--ds-ink)}
body .saly-page .gk .ds-btn-ghost-d{background:transparent;color:var(--ds-on-night);border-color:rgba(220,214,255,.32)}
body .saly-page .gk .ds-btn-ghost-d:hover{border-color:var(--ds-on-night);color:#fff}
body .saly-page .gk .ds-btn:focus-visible,body .saly-page .gk .ds-card-link:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}

/* link card ("Sprawdź inne funkcjonalności") */
body .saly-page .gk .ds-card-link{background:#fff;border:1px solid var(--ds-line-2);border-radius:18px;color:var(--ds-ink);transition:border-color .2s,transform .2s}
body .saly-page .gk .ds-card-link:hover{border-color:var(--ds-accent);color:var(--ds-ink);transform:translateY(-2px)}

/* dark blocks (with data-sh-dark for the menu), dark cards and the contact card */
body .saly-page .gk .ds-dark{background:var(--ds-night);color:#fff}
body .saly-page .gk .ds-dark-card{border:1px solid var(--ds-night-line);background:var(--ds-night-tile);border-radius:16px}
body .saly-page .gk .ds-cta{background:var(--ds-night);border-radius:24px}

/* a page that opens with a dark scene (the BI pages): the scene starts under the menu bar, so the bar opens in its dark glass
   (saly-menu.js tone() sees [data-sh-dark] under it). Pulled up by the bar's height with its 1px line, padded back by the same,
   so nothing in the scene moves (user, 2026-10-23). */
body .saly-page>.saly-sec:first-of-type>.gk>section.ds-dark:first-child{margin-top:-73px;padding-top:73px}
@media (max-width:1099px){body .saly-page>.saly-sec:first-of-type>.gk>section.ds-dark:first-child{margin-top:-65px;padding-top:65px}}

@media (prefers-reduced-motion:reduce){body .saly-page .gk .ds-btn,body .saly-page .gk .ds-card-link{transition:none}body .saly-page .gk .ds-card-link:hover{transform:none}}