/* =============================================================
   Eveilo — base.css
   Zmienne, reset, typografia oraz wspólne komponenty
   (przyciski, formularze, karty, znaczniki). Bez Tailwinda.
   ============================================================= */

:root {
    --c-primary:        #4f46e5;
    --c-primary-dark:   #4338ca;
    --c-primary-50:     #eef2ff;
    --c-primary-100:    #e0e7ff;

    --c-text:           #111827;
    --c-muted:          #6b7280;
    --c-faint:          #9ca3af;

    --c-border:         #e5e7eb;
    --c-border-light:   #f3f4f6;
    --c-bg:             #f9fafb;
    --c-white:          #ffffff;

    --c-ok:             #16a34a;
    --c-ok-bg:          #f0fdf4;
    --c-ok-border:      #bbf7d0;
    --c-warn:           #b45309;
    --c-warn-bg:        #fffbeb;
    --c-warn-border:    #fde68a;
    --c-bad:            #dc2626;
    --c-bad-bg:         #fef2f2;
    --c-bad-border:     #fecaca;

    --radius:           0.75rem;
    --radius-sm:        0.5rem;
    --radius-pill:      999px;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 Helvetica, Arial, "Figtree", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-text);
    background: var(--c-bg);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

/* ---------- Przyciski ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
    text-align: center;
}
.btn:disabled { opacity: .55; cursor: default; }

.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); }

.btn-secondary { background: #fff; color: var(--c-muted); border-color: var(--c-border); }
.btn-secondary:hover { background: var(--c-border-light); }

.btn-soft { background: var(--c-border-light); color: #374151; }
.btn-soft:hover { background: #e5e7eb; }

.btn-block { width: 100%; }
.btn-lg { padding: 0.75rem 1.25rem; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

/* ---------- Pola formularza ---------- */
.field { margin-bottom: 1rem; }
.field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.3rem;
}
.field-hint { font-size: 0.75rem; color: var(--c-faint); margin: 0 0 0.4rem; }

.input, .textarea, .select {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--c-text);
    background: #fff;
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary-100);
}
.textarea { resize: vertical; }
.input-mono { font-family: var(--font-mono); }

.field-error { color: var(--c-bad); font-size: 0.75rem; margin: 0.25rem 0 0; }

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--c-muted);
    cursor: pointer;
}

/* ---------- Karty ---------- */
.card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.card-sm { padding: 1rem; }
.card + .card { margin-top: 1rem; }

.card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* ---------- Znaczniki / badge ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
}
.badge-ok   { background: var(--c-ok-bg);   color: var(--c-ok);   }
.badge-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.badge-bad  { background: var(--c-bad-bg);  color: var(--c-bad);  }

/* ---------- Komunikaty ---------- */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; }
.alert-success { background: var(--c-ok-bg);  border: 1px solid var(--c-ok-border);  color: #166534; }
.alert-error   { background: var(--c-bad-bg); border: 1px solid var(--c-bad-border); color: #991b1b; }

/* ---------- Pomocnicze ---------- */
.muted { color: var(--c-faint); }
.mono  { font-family: var(--font-mono); }
.text-center { text-align: center; }
.mb-lg { margin-bottom: 1.5rem; }
.mt-md { margin-top: 1rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

@media (max-width: 640px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}