/* ========================================================================
   NORMA — wariant "Portal BHP"
   Inter + chłodna szara paleta + czerwony akcent (styl panelu admina).

   Przełączanie: zmień NORMA_THEME w application/config/constants.php
     'styles'        → oryginalny NORMA (Fraunces/Geist, ciepła paleta)
     'styles-portal' → ten plik (Inter bold, szary, czerwony akcent)
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
@import url('./styles.css');

/* ── Zmienne ──────────────────────────────────────────────────────────── */

:root {
  /* Czcionki: Inter (jak panel admina) */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  /* Ink → Slate */
  --ink-950: #020617;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;

  /* Cream → chłodna szara (tło panelu admina: #f3f4f6) */
  --cream-50:  #f9fafb;
  --cream-100: #f3f4f6;
  --cream-200: #e5e7eb;
  --cream-300: #d1d5db;
  --cream-400: #9ca3af;

  /* Amber → czerwień portalu BHP */
  --amber-50:  #fff5f5;
  --amber-100: #fee2e2;
  --amber-300: #f87171;
  --amber-500: #ef3f37;
  --amber-600: #dc2626;
  --amber-700: #b91c1c;

  /* Semantyczne — wartości z portal.css */
  --bg:            #f3f4f6;
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --border:        #e5e7eb;
  --border-strong: #d1d5db;
  --text:          #374151;
  --text-muted:    #6b7280;
  --text-dim:      #9ca3af;
  --accent:        #ef3f37;
  --accent-ink:    #b91c1c;

  /* Cienie — jak .login-box w portalu */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 6px 18px rgba(15,23,42,.06), 0 24px 60px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.10), 0 6px 18px rgba(15,23,42,.06);

  /* Promienie — jak portal (16px karty, 10px inputy) */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ── Typografia ─────────────────────────────────────────────────────────
   Zerujemy osie zmiennych Fraunces ('opsz', 'SOFT') — Inter ich nie ma.
   Wagi i letter-spacing zgodne z portal.css (700, nie 800).
   ───────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-variation-settings: normal;
  font-style: normal;
  color: #111827;
}

/* .page-title h1 w portalu: 24px/700/-0.02em #111827
   .login-brand-headline: 40px/700/-0.02em — tę samą wagę stosujemy do wszystkich */
h1 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-weight: 700; letter-spacing: -0.02em; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
h4 { font-weight: 600; letter-spacing: -0.01em; }

/* Klasa serif-italic: w tym wariancie = Inter italic */
.serif-italic { font-weight: 400; font-style: italic; }

/* Brand w sidebarze */
.brand-mark {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f9fafb;
}

/* ── Login kursanta: overrides z wyższą specyficznością ─────────────────
   Inline <style> w login.php ma specyficzność (0,1,1) i wygrywa z `h1`.
   Używamy (0,2,1) żeby wygrać bez !important.
   ───────────────────────────────────────────────────────────────────── */

/* Lewa kolumna — hero heading: 300/Fraunces → 700/Inter jak login-brand-headline */
.stage .stage-art h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Liczby statystyk (.v): Fraunces italic → Inter bold, nie italic */
.stage .stage-cred .v {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Prawa kolumna — h2 tytułu formularza: 400 → 700 jak .login-box h3 portalu */
.form-wrap .form-card h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Przycisk akcentowy: gradient red→amber jak login-submit w portalu */
.btn-accent {
  background: linear-gradient(135deg, #ef3f37 0%, #f59e0b 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(239, 63, 55, 0.30);
}
.btn-accent:hover {
  background: linear-gradient(135deg, #ef3f37 0%, #f59e0b 100%);
  border-color: transparent;
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(239, 63, 55, 0.38);
}