/* base.css — variables, reset, typography, scrollbar */

:root {
  /* Jasny motyw (domyślny) */
  --bg:       #f4f5f7;
  --bg2:      #ffffff;
  --bg3:      #eef0f4;
  --surface:  #ffffff;
  --surface2: #f4f5f7;

  --border:   #e2e5ec;
  --border2:  #c8cdd8;

  --text:     #374151;
  --text2:    #6b7280;
  --text3:    #9ca3af;
  --heading:  #111827;

  --accent:       #2563eb;
  --accent-dim:   rgba(37, 99, 235, 0.10);
  --accent-hover: rgba(37, 99, 235, 0.18);

  --green:      #16a34a;
  --green-dim:  rgba(22, 163, 74, 0.10);
  --amber:      #d97706;
  --amber-dim:  rgba(217, 119, 6, 0.10);
  --red:        #dc2626;
  --red-dim:    rgba(220, 38, 38, 0.10);

  --overlay:  rgba(0, 0, 0, .25);
  --radius:   8px;
  --sidebar-w: 220px;
  --mono: 'IBM Plex Mono', 'Fira Mono', monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

html.dark {
  /* Ciemny motyw (włączany klasą) */
  --bg:       #0d0f14;
  --bg2:      #13161e;
  --bg3:      #191c26;
  --surface:  #1e2230;
  --surface2: #252a38;

  --border:   #2a2f42;
  --border2:  #353b52;

  --text:     #c8d0e0;
  --text2:    #8892a8;
  --text3:    #5a6275;
  --heading:  #e8edf5;

  --accent:       #4f8ef7;
  --accent-dim:   rgba(79, 142, 247, 0.15);
  --accent-hover: rgba(79, 142, 247, 0.25);

  --green:      #3ecf8e;
  --green-dim:  rgba(62, 207, 142, 0.12);
  --amber:      #f5a623;
  --amber-dim:  rgba(245, 166, 35, 0.12);
  --red:        #f74f5e;
  --red-dim:    rgba(247, 79, 94, 0.12);

  --overlay:  rgba(0, 0, 0, .55);
}

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

html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* ---- links ---- */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---- headings ---- */
h1, h2, h3 {
  color: var(--heading);
  font-weight: 600;
  line-height: 1.25;
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

/* ---- interactive ---- */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}

button {
  cursor: pointer;
  border: none;
}

input, select, textarea {
  background: var(--bg);
  padding: 8px 12px;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

/* ---- custom scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

/* ---- smooth theme transition ---- */
*, *::before, *::after {
  transition: background-color .18s ease, border-color .18s ease, color .1s ease;
}
/* Don't animate transforms — only colors */
.modal, .toast, .chevron, button svg { transition: none; }