/* ============================================================================
   Roadmap Builder — BRAND TOKENS (v1)
   ────────────────────────────────────────────────────────────────────────────
   Motywy (3):  executive / nordic / control   →  ustaw na <html data-theme="…">
   Tryb:        jasny / ciemny                  →  prefers-color-scheme (auto)
                                                   + [data-mode="dark"] (ręczny)
   ────────────────────────────────────────────────────────────────────────────
   JAK UŻYĆ W JS (Faza 0):
   • W render js (grid/list/board/todo) ZAMIEN literalne HEX-y na var(--token),
     np.  background:'#F8FAFC'  →  background:'var(--bg)'
          color:'#64748B'       →  color:'var(--text-muted)'
   • Dzięki temu przełącznik motywu działa BEZ re-renderu JS (CSS vars
     są rozwiązywane w przeglądarce).
   MAPOWANIE starych HEX-ów:
      #F8FAFC  →  var(--bg)        #64748B  →  var(--text-muted)
      #FFFFFF  →  var(--surface)   #E2E8F0  →  var(--border)
      (aktywna zakładka / primary) →  var(--accent)  (było blue-700 #1d4ed8)
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   1. BAZA — jasny, domyślny = EXECUTIVE (granat)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Typografia (motyw nadpisuje font w sekcji 2) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* Powierzchnie (jasne) */
  --bg:            #F8FAFC;   /* tło aplikacji (workspace) */
  --surface:       #FFFFFF;   /* karty, panele */
  --surface-2:     #F1F5F9;   /* tło wewnętrzne / hover */
  --border:        #E2E8F0;
  --grid-line:     #E9EEF4;   /* siatka Gantta, linie wierszy */

  /* Tekst (jasne) */
  --ink:           #16202B;   /* tekst główny (brand ink) */
  --text:          #26313E;
  --text-muted:    #64748B;
  --text-faint:    #94A3B8;

  /* Akcent — domyślny = Executive (nadpisywany per motyw) */
  --accent:        #1F5EAF;
  --accent-hover:  #1B4E8C;
  --accent-muted:  #E3EDF8;   /* tło aktywnej zakładki / zaznaczenia */
  --accent-fg:     #FFFFFF;   /* tekst na akcencie */
  --ring:          rgba(31, 94, 175, .45);

  /* Semantyka */
  --danger:        #C0301F;
  --danger-muted:  #FBE9E7;
  --success:       #178A75;
  --warning:       #B0843C;

  /* Roadmap — spektrum faz (stonowane; zamiast „tęczy”) + akcenty wykresu */
  --phase-a:       #2E6BB0;
  --phase-b:       #5B8CC7;
  --phase-c:       #6C8299;
  --phase-d:       #2E7D76;
  --phase-e:       #B0843C;
  --milestone:     var(--accent);
  --progress:      var(--accent);
}

/* ──────────────────────────────────────────────────────────────────────────
   2. MOTYWY — nadpisują akcent i font. (Nordic/Control używają Inter jako
   --font-sans; tylko Executive przełącza na IBM Plex Sans.)
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="executive"] {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --accent:       #1F5EAF;
  --accent-hover: #1B4E8C;
  --accent-muted: #E3EDF8;
  --ring:         rgba(31, 94, 175, .45);
}
[data-theme="nordic"] {
  --accent:       #178A75;
  --accent-hover: #11695A;
  --accent-muted: #DFF0EA;
  --ring:         rgba(23, 138, 117, .45);
}
[data-theme="control"] {
  --accent:       #2E63E9;
  --accent-hover: #2450C4;
  --accent-muted: #E5ECFB;
  --ring:         rgba(46, 99, 233, .45);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. CIEMNY TRYB — auto (prefers-color-scheme) i ręczny ([data-mode]).
   [data-mode] ma wyższą specyficzność niż media, więc ręczny nadpisuje auto.
   Akcent rozjaśniony o stopień dla kontrastu na graficie.
   ────────────────────────────────────────────────────────────────────────── */

/* 3a. Auto-dark: powierzchnie */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0B1220;
    --surface:       #111827;
    --surface-2:     #1B2534;
    --border:        #2B3648;
    --grid-line:     #243040;
    --ink:           #E5EAF1;
    --text:          #CBD5E1;
    --text-muted:    #94A3B8;
    --text-faint:    #64748B;
    --danger-muted:  #3A1E1C;
  }
  /* Auto-dark: akcent per motyw */
  [data-theme="executive"] { --accent:#4E86C7; --accent-hover:#5E97D6; --accent-muted:rgba(78,134,199,.16); --ring:rgba(78,134,199,.5); }
  [data-theme="nordic"]    { --accent:#33A48A; --accent-hover:#41B599; --accent-muted:rgba(51,164,138,.16); --ring:rgba(51,164,138,.5); }
  [data-theme="control"]   { --accent:#5C8CFF; --accent-hover:#6F9BFF; --accent-muted:rgba(92,140,255,.16); --ring:rgba(92,140,255,.5); }
}

/* 3b. Ręczny dark (nadpisuje auto myślą: ustawia się NA html) */
[data-mode="dark"] {
  --bg:            #0B1220;
  --surface:       #111827;
  --surface-2:     #1B2534;
  --border:        #2B3648;
  --grid-line:     #243040;
  --ink:           #E5EAF1;
  --text:          #CBD5E1;
  --text-muted:    #94A3B8;
  --text-faint:    #64748B;
  --danger-muted:  #3A1E1C;
}
[data-mode="dark"][data-theme="executive"] { --accent:#4E86C7; --accent-hover:#5E97D6; --accent-muted:rgba(78,134,199,.16); --ring:rgba(78,134,199,.5); }
[data-mode="dark"][data-theme="nordic"]    { --accent:#33A48A; --accent-hover:#41B599; --accent-muted:rgba(51,164,138,.16); --ring:rgba(51,164,138,.5); }
[data-mode="dark"][data-theme="control"]   { --accent:#5C8CFF; --accent-hover:#6F9BFF; --accent-muted:rgba(92,140,255,.16); --ring:rgba(92,140,255,.5); }

/* 3c. Ręczny jasny (wymusza jasny nawet przy auto-dark) */
[data-mode="light"] {
  --bg:            #F8FAFC;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F9;
  --border:        #E2E8F0;
  --grid-line:     #E9EEF4;
  --ink:           #16202B;
  --text:          #26313E;
  --text-muted:    #64748B;
  --text-faint:    #94A3B8;
  --danger-muted:  #FBE9E7;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. PRZYKŁADY UŻYCIA KOMPONENTÓW (dla deva)
   ────────────────────────────────────────────────────────────────────────── */
/*
  Przycisk primary / aktywna zakładka:
    background: var(--accent);
    color:      var(--accent-fg);
  Zakładka aktywna (tło subtelne):
    background: var(--accent-muted);
    color:      var(--accent);
  Hover przycisku:
    background: var(--accent-hover);
  Focus ring:
    outline: 2px solid var(--ring);
  Link / aktywny wiersz / diament kamienia milowego:
    color / fill / background: var(--accent);
  Wiersze roadmapy (zamiast tęczy):
    faza A → var(--phase-a)  ·  faza B → var(--phase-b)
    kamień milowy → var(--milestone)
*/

/* ──────────────────────────────────────────────────────────────────────────
   5. INTEGRACJA Z APLIKACJĄ (overrides na Tailwind + chrome + brand)
   ────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

/* Akcent → klasy Tailwind (primary / aktywna zakładka / link) */
.bg-blue-700, .bg-blue-600, .bg-indigo-600, .bg-indigo-700 { background-color: var(--accent) !important; }
.bg-blue-700:hover, .bg-blue-600:hover, .bg-indigo-600:hover, .bg-indigo-700:hover,
.hover\:bg-blue-800:hover, .hover\:bg-indigo-700:hover { background-color: var(--accent-hover) !important; }
.text-blue-700, .text-blue-600 { color: var(--accent) !important; }
.ring-blue-400, .ring-blue-500 { --tw-ring-color: var(--accent) !important; }

/* Chrome (toolbar / zakładki / modale / dropdowny / inputy) */
#toolbar, #viewTabsBar { background: var(--surface) !important; border-color: var(--border) !important; }
#toolbar .toolbar-btn.bg-gray-100,
#viewTabsBar .toolbar-btn.bg-gray-100,
#toolbar .toolbar-btn.bg-gray-50,
#viewTabsBar .toolbar-btn.bg-gray-50 { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
#toolbar .toolbar-btn.bg-gray-100:hover { background: var(--accent-muted) !important; }
.modal { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.modal h2 { color: var(--ink) !important; }
#viewMenu, #exportDataMenu, #aiMenu, .context-menu {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
input, select, textarea { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; }
footer { color: var(--text-faint) !important; border-color: var(--border) !important; }

/* Brand (header) */
.brand-mark { flex: none; display: block; }
.brand-wordmark { color: var(--ink) !important; }
.brand-signature { color: var(--accent) !important; }
@media (prefers-color-scheme: dark) {
  .brand-mark rect { fill: #ffffff; }
  .brand-mark path[stroke] { stroke: #ffffff; }
}

/* ──────────────────────────────────────────────────────────────────────────
   6. NEUTRAL / SURFACE / INK MAP — pełne pokrycie motywu i dark mode
   (uzupełnienie: wiele elementów używa sztywnych jasnych klas
   `bg-white`, `bg-gray-*`, `text-gray-*`, `border-gray-*`, których
   wcześniej nie obejmowano — przez co część UI nie reagowała na motyw/dark).
   Wartości są mapowane na tokeny, więc przełącznik motywu i tryb ciemny
   działają spójnie na CAŁYM interfejsie.
   ────────────────────────────────────────────────────────────────────────── */

/* Powierzchnie */
.bg-white { background-color: var(--surface) !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--surface-2) !important; }
.bg-gray-200, .bg-gray-300 { background-color: var(--border) !important; }
.bg-slate-800, .bg-slate-900 { background-color: var(--accent) !important; } /* przycisk Sign in / primary */

/* Tekst */
.text-gray-900, .text-gray-800 { color: var(--ink) !important; }
.text-gray-700 { color: var(--text) !important; }
.text-gray-600, .text-gray-500 { color: var(--text-muted) !important; }
.text-gray-400, .text-gray-300 { color: var(--text-faint) !important; }
.text-blue-900 { color: var(--ink) !important; }

/* Obramowania */
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; }

/* Hover — subtelny akcent zamiast jawnego szarego */
.hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover, .hover\:bg-gray-50:hover { background-color: var(--accent-muted) !important; }
.hover\:text-gray-700:hover { color: var(--text) !important; }
.hover\:border-gray-300:hover { border-color: var(--accent) !important; }

/* Znaczące style inline (panRuler, effectiveness) — tokenizacja */
#panRuler, #panRulerV { border-color: var(--border) !important; color: var(--text-faint) !important; background: var(--surface-2) !important; }
#effectivenessPill { color: var(--success) !important; }