/*!
 * styles.css — wspólne tokeny i warstwa bazowa (jedno źródło prawdy).
 * Współdzielone przez: index.html, call-for-presentations.html, 404.html.
 * Ładowany PRZED inline <style> każdej strony, więc reguły specyficzne dla
 * podstrony nadal mogą go nadpisać. Komponenty (nav, hero, karty) pozostają
 * na razie w plikach — tu żyją tokeny, reset, warstwa a11y i tło.
 */

:root{
  /* PALETA: niebieski + czerwień na czerni i bieli */
  --primary: #1d4ed8;       /* Mocny niebieski - główny kolor marki */
  --primary-dark: #1e3a8a;  /* Granat */
  --secondary: #2563eb;     /* Jaśniejszy niebieski - gradienty */
  --ai-blue: #5b8cff;       /* Żywy błękit "AI-First" */
  --accent: #dc2626;        /* Czerwień - akcenty i CTA */
  --shadow-color: #0a1a4d;

  --dark: #0b1120;          /* Prawie czerń (granatowa) dla tekstu */
  --light: #55607a;         /* Tekst poboczny - chłodny grafit */
  --surface: #ffffff;       /* Tło kart */
  --bg-light: #f6f7fb;      /* Główne jasne tło strony */
  --border: #e4e7ef;        /* Delikatne ramki */
  --success: #10b981;
  --accent-ink: #b91c1c;    /* Ciemniejsza czerwień pod tekst na jasnym tle (kontrast >=4.5:1) */

  --radius: 16px;
  --shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.01);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 20px 25px -5px rgba(29, 78, 216, 0.15), 0 8px 10px -6px rgba(29, 78, 216, 0.1);
  --nav-h: 64px;
}

*{box-sizing:border-box}
html{overflow-x:hidden;width:100%}
/* Płynne przewijanie tylko, gdy użytkownik nie prosi o ograniczenie ruchu */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
html,body{min-height:100%}
body{margin:0;font-family:'Roboto',sans-serif;line-height:1.6;color:var(--dark);background:var(--bg-light);overflow-x:hidden;width:100%;position:relative;-webkit-font-smoothing:antialiased;font-weight:400;}
h1,h2,h3,h4{letter-spacing:-0.02em;font-weight:700;line-height:1.2;font-family:'Roboto',sans-serif;}
img{max-width:100%;height:auto;display:block}

/* Dostępność: skip-link, sr-only, focus */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:1rem;top:1rem;z-index:2000;background:#fff;color:#000;padding:.5rem 1rem;border-radius:999px;outline:3px solid var(--primary)}
.sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
:focus-visible{outline:3px solid rgba(29,78,216,0.45);outline-offset:2px}
.card:focus-visible, .pill:focus-visible, .org-card:focus-visible{
  outline:3px solid rgba(29,78,216,0.55);
  transform:translateY(-2px);
}

/* Subtelna, jasna siatka w tle */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
  z-index:-2;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 0%, transparent 90%);
}

/* Żywe, rozmyte "orby" ożywiające jasne tło */
body::after{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(circle 800px at 100% 0%, rgba(220,38,38,0.03) 0%, transparent 70%),
    radial-gradient(circle 600px at 0% 50%, rgba(29,78,216,0.04) 0%, transparent 60%),
    radial-gradient(circle 800px at 80% 100%, rgba(239,68,68,0.03) 0%, transparent 60%);
  pointer-events:none; z-index:-1;
}

/* Komunikat błędu przy pojedynczym polu formularza (walidacja wszystkich pól naraz).
   flex-basis:100% => w kontenerze flex (np. .checkbox z flex-wrap) komunikat idzie do własnej linii pod polem. */
.field-error{display:block;flex-basis:100%;margin-top:.4rem;color:var(--accent-ink);font-size:.8rem;font-weight:600;line-height:1.4;}

/* Logo (marka): w stopce (div.brand) ukryte; w nagłówku pokazujemy SAM SYGNET.
   Nawigacyjny znak to <a class="brand"> = svg (sygnet) + <span> (tekst).
   Ukrywamy tekstowy <span>, zostaje sam sygnet. Stopkowe div.brand pozostaje ukryte. */
.brand{display:none !important;}
a.brand{display:inline-flex !important; align-items:center;}
a.brand > span{display:none !important;}