/* ============================================================
   Focus UI — wspólny system designu (tokeny + komponenty)
   Źródło prawdy dla kolorów/odstępów/komponentów całej aplikacji.
   Strony podpinają: <link rel="stylesheet" href="…/css/focus-ui.css">
   • Tokeny (:root) — przyjmować wszędzie, zamiast twardych hexów.
   • Komponenty .fc-* — opcjonalne, prefiksowane (zero kolizji z istniejącym CSS).
   Po zmianie pliku bump ?v= w linkach.
   ============================================================ */

:root{
    /* Marka Focus */
    --fc-navy:#1f2f65;
    --fc-blue:#2f4795;
    --fc-blue-rgb:47,71,149; /* = #2f4795, do rgba(var(--fc-blue-rgb), α) */
    --fc-blue-2:#3d5af1;     /* primary / akcent */
    --fc-blue-l:#4a68bd;
    --fc-blue-soft:#eef3ff;

    /* Tekst / linie / powierzchnie */
    --fc-ink:#1e2747;
    --fc-muted:#6b7392;
    --fc-line:#e6e9f5;
    --fc-surface:#ffffff;
    --fc-bg:#f0f2f9;

    /* Semantyczne */
    --fc-success:#16a34a;  --fc-success-bg:#e6f7ec;  --fc-success-line:#bce7cb;
    --fc-danger:#dc2626;   --fc-danger-bg:#fdecec;   --fc-danger-line:#f6c9c9;
    --fc-warning:#c2500a;  --fc-warning-bg:#fff7ed;  --fc-warning-line:#fde0c2;
    --fc-info-bg:#e8f1fe;  --fc-info-line:#c4dcfb;

    /* Gradienty */
    --fc-grad:linear-gradient(135deg,#2f4795 0%,#3d5af1 100%);
    --fc-grad-app:linear-gradient(135deg,#1f2f65 0%,#2f4795 50%,#4a68bd 100%);

    /* Promienie */
    --fc-r-sm:8px;
    --fc-r:13px;
    --fc-r-lg:20px;
    --fc-r-xl:24px;

    /* Cienie */
    --fc-shadow-sm:0 1px 3px rgba(16,28,70,.08);
    --fc-shadow:0 8px 24px rgba(45,71,149,.18);
    --fc-shadow-lg:0 24px 70px rgba(10,20,55,.45);

    /* Focus ring */
    --fc-ring:rgba(61,90,241,.28);

    /* ── Aliasy zgodne z dotychczasowymi nazwami w index.html / set_pin.html ──
       (dzięki temu te strony działają bez zmian w treści CSS, tylko z linkiem) */
    --navy:var(--fc-navy);
    --blue:var(--fc-blue);
    --blue-2:var(--fc-blue-2);
    --blue-l:var(--fc-blue-l);
    --ink:var(--fc-ink);
    --muted:var(--fc-muted);
    --line:var(--fc-line);
    --ring:var(--fc-ring);
}

/* ── Tło aplikacji (opcjonalne, klasa na <body>) ─────────────── */
.fc-bg{
    background:var(--fc-grad-app) fixed;
    color:var(--fc-ink);
}
.fc-bg::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(120% 90% at 80% -10%, rgba(130,165,235,.35), transparent 60%);
}

/* ── Karta ───────────────────────────────────────────────────── */
.fc-card{
    position:relative; z-index:1;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.5);
    border-radius:var(--fc-r-xl);
    box-shadow:var(--fc-shadow-lg);
    padding:32px;
}

/* ── Przyciski ───────────────────────────────────────────────── */
.fc-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:15px; font-size:16px; font-weight:700; color:#fff;
    background:var(--fc-grad); border:none; border-radius:var(--fc-r);
    cursor:pointer; letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(45,71,149,.35);
    transition:transform .18s ease, box-shadow .18s ease, opacity .2s, background .2s;
}
.fc-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 30px rgba(45,71,149,.45); }
.fc-btn:active:not(:disabled){ transform:translateY(0); }
.fc-btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.fc-btn--secondary{
    background:#fff; color:var(--fc-blue-2);
    border:1.5px solid var(--fc-line); box-shadow:none;
}
.fc-btn--secondary:hover:not(:disabled){ background:var(--fc-blue-soft); border-color:var(--fc-blue-2); box-shadow:0 6px 16px rgba(45,71,149,.18); }
.fc-btn--ghost{ background:transparent; color:var(--fc-blue-2); border:none; box-shadow:none; width:auto; padding:10px 16px; }

/* ── Pola formularza ─────────────────────────────────────────── */
.fc-field{ margin-bottom:16px; text-align:left; }
.fc-label{
    display:block; font-size:13px; font-weight:700; color:var(--fc-muted);
    letter-spacing:.02em; margin-bottom:7px; text-transform:uppercase;
}
.fc-input{
    width:100%; padding:14px 16px; font-size:16px; font-weight:600; color:var(--fc-ink);
    border:2px solid var(--fc-line); border-radius:var(--fc-r); background:#fff;
    transition:border-color .2s, box-shadow .2s;
}
.fc-input:focus{ outline:none; border-color:var(--fc-blue-2); box-shadow:0 0 0 4px var(--fc-ring); }

/* ── Komunikaty ──────────────────────────────────────────────── */
.fc-msg{ margin-top:18px; padding:13px 15px; border-radius:12px; font-size:14px; font-weight:600; line-height:1.5; }
.fc-msg--error{ background:var(--fc-danger-bg); color:#a32020; border:1px solid var(--fc-danger-line); }
.fc-msg--info{ background:var(--fc-info-bg); color:#1c478f; border:1px solid var(--fc-info-line); }
.fc-msg--success{ background:var(--fc-success-bg); color:#176a36; border:1px solid var(--fc-success-line); }
.fc-msg--warning{ background:var(--fc-warning-bg); color:#8a3b06; border:1px solid var(--fc-warning-line); }

/* ── Kafelek (np. szybki link na dashboardzie) ───────────────── */
.fc-tile{
    display:flex; flex-direction:column; gap:4px; text-align:left;
    padding:14px 16px; background:#fff; color:var(--fc-ink);
    border:1px solid var(--fc-line); border-radius:var(--fc-r);
    box-shadow:var(--fc-shadow-sm); cursor:pointer; text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.fc-tile:hover{ transform:translateY(-2px); box-shadow:var(--fc-shadow); border-color:var(--fc-blue-2); }
.fc-tile__title{ font-weight:700; }
.fc-tile__note{ font-size:13px; color:var(--fc-muted); }

/* ── Link tekstowy ───────────────────────────────────────────── */
.fc-link{ color:var(--fc-blue-2); font-weight:700; text-decoration:none; }
.fc-link:hover{ text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
    .fc-btn,.fc-tile,.fc-input{ transition:none; }
}