/* ============================================================
   agent001 UI — design tokens (KANON)
   Jedyne źródło prawdy dla całej rodziny agentów.
   Zasada jednej poprawki: zmiany TYLKO tutaj, nigdy w kopii
   w public/ agenta. Dystrybucja: scripts/sync-ui.sh
   Baza wizualna: developer.agent001.pl
   Kontrast: wg agentPM (ink na paper ~20:1, pille AAA)
   ============================================================ */

@import url('fonts.css?v=1.0.8');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Ink (tekst) — kontrast na --paper (weryfikuje tests/contrast-check.js):
     ink 19.4:1 · ink-2 17.3:1 · ink-3 13.2:1 · ink-soft 6.1:1 · ink-mute 4.6:1
     Każdy poziom ≥4.5:1, więc dowolny tekst przechodzi WCAG AA i Lighthouse. */
  --ink:       #050608;
  --ink-2:     #14161b;
  --ink-3:     #2a2d35;
  --ink-soft:  #5a5f6b;
  --ink-mute:  #6b7280;

  /* ---- Paper (tła) */
  --paper:     #fafaf7;
  --paper-2:   #f1f1ec;
  --paper-3:   #e7e7e1;
  --white:     #ffffff;

  /* ---- Lines (obramowania) */
  --line:      #d8d8d1;
  --line-soft: #e9e9e3;

  /* ---- Status (semantyczne) */
  --ok:    #15a868;
  --warn:  #ff8a00;
  --crit:  #ff2d3a;
  --info:  #2348ff;
  --ok-dim:   rgba(21,168,104,.12);
  --warn-dim: rgba(255,138,0,.12);
  --crit-dim: rgba(255,45,58,.12);
  --info-dim: rgba(35,72,255,.10);

  /* Pille wysokokontrastowe (tekst/tło/ramka) — wzorzec agentPM, AAA */
  --pill-ok-fg:   #0c7d4e; --pill-ok-bg:   #edf9f2; --pill-ok-line:   #bfe9d2;
  --pill-warn-fg: #a35b00; --pill-warn-bg: #fff5e6; --pill-warn-line: #ffd3a3;
  --pill-crit-fg: #a8121b; --pill-crit-bg: #ffefef; --pill-crit-line: #ffb8be;
  --pill-info-fg: #1a3acc; --pill-info-bg: #eef1ff; --pill-info-line: #b3c4ff;

  /* ---- Akcenty agentów (mapa rodziny)
     Agent ustawia w swoim agent.css:  :root { --accent: var(--acc-developer); } */
  --acc-pm:         #6b3df5;
  --acc-developer:  #6366f1;
  --acc-dev:        #18d27f;
  --acc-ea:         #2348ff;
  --acc-dom:        #00b7c2;
  --acc-coach:      #ff4d8d;
  --acc-audit:      #ff8a00;
  --acc-code:       #ff2d3a;
  --acc-comms:      #00e5d0;
  --acc-ftp:        #0ea5e9;
  --acc-cicd:       #f5a623;
  --acc-backup:     #18d27f;
  --acc-release:    #22c55e;
  --acc-research:   #6faaff;
  --acc-mail:       #d97706;
  --acc-report:     #0891b2;
  --acc-sms:        #7c3aed;
  --acc-auth:       #64748b;
  --acc-client:     #0d9488;
  --acc-jobs:       #b45309;
  --acc-keymaster:  #7c8799;
  --acc-lighthouse: #ca8a04;
  --acc-sales:      #be185d;
  --acc-seo:        #4d7c0f;
  --acc-site:       #1d4ed8;
  --acc-writer:     #9333ea;
  --acc-builder:    #ea580c;

  /* Domyślny akcent (nadpisuje agent.css)
     --accent: brand — ramki, ikony, dekoracje, glify
     --accent-strong: tło pod BIAŁY tekst (CTA) — przyciemnione tak, by każdy
       akcent z mapy dawał ≥4.5:1 (weryfikuje tests/contrast-check.js)
     --accent-2: hover dla accent-strong */
  --accent:        var(--acc-developer);
  --accent-strong: color-mix(in srgb, var(--accent) 52%, var(--ink-2));
  --accent-2:      color-mix(in srgb, var(--accent) 40%, var(--ink-2));
  --accent-dim:    color-mix(in srgb, var(--accent) 10%, transparent);

  /* ---- Typografia
     Baza 14px. Inputy/selecty/textarea ZAWSZE ≥16px na mobile
     (iOS Safari auto-zoom poniżej 16px — egzekwuje ui.css). */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --fs-2xs: 10px;   /* eyebrow, etykiety mc-cards — tylko uppercase mono */
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-base:14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 24px;
  --fs-kpi: 32px;

  /* ---- Spacing (skala 4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  /* ---- Radius */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px;

  /* ---- Shadows */
  --shadow-1: 0 1px 0 rgba(5,6,8,.04), 0 1px 2px rgba(5,6,8,.04);
  --shadow-2: 0 1px 0 rgba(5,6,8,.04), 0 4px 18px -6px rgba(5,6,8,.10);

  /* ---- Layout */
  --sidebar-w: 224px;
  --topbar-h:  52px;
  --content-max: 1640px;

  /* ---- Breakpointy (KANON — nie tworzyć własnych w agent.css)
     CSS vars nie działają w @media — wartości przypięte komentarzem:
     xl 1640px (max-width contentu) · lg 1100px (grid 4→2)
     md 900px (2 panele→1, formy→1 kol) · sm 768px (sidebar→hamburger)
     xs 640px (tabele→karty, modale full-width, iOS input fix)
     Poniżej 430px: bez nowych breakpointów — layouty płynne. */

  /* ---- Z-index (warstwy) */
  --z-sticky:  10;
  --z-sidebar: 100;
  --z-overlay: 200;
  --z-modal:   210;
  --z-toast:   300;
}

html, body {
  height: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; /* iOS: nie powiększaj tekstu w landscape */
}

/* Dostępność: użytkownicy z ograniczeniem ruchu */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}