/* ======================================================================
   LexperDesk — tokeny i baza.
   WARSTWA 1: primitywy (jedyne hexy) -> WARSTWA 2: role (--ld-*).
   Poza tym plikiem: tylko var(--ld-*). To jedyne zrodlo prawdy dla motywu.
   ====================================================================== */

/* =========================================================================
   LexperDesk — design system
   WARSTWA 1: primitywy (jedyne hexy) -> WARSTWA 2: role (--ld-*)
   Poza tym plikiem: tylko var(--ld-*). Komponenty używają klas .ld-*.
   ========================================================================= */
:root {
    /* --- WARSTWA 1: primitywy (jedyne hexy w projekcie) --- */
    --ld-c-white: #ffffff;

    /* grafit — chrome marki: sidebar, awatar, ciemne powierzchnie */
    --ld-c-graphite-900: #141619;
    --ld-c-graphite-800: #1c1e24;
    --ld-c-graphite-700: #262a33;
    --ld-c-graphite-600: #333845;
    --ld-c-graphite-400: #8d9099;
    --ld-c-graphite-200: #d2d3d7;

    /* atrament — tekst treści */
    --ld-c-ink-900: #1a1d23;
    --ld-c-ink-700: #3d4350;

    /* szarości */
    --ld-c-slate-500: #6b7280;
    --ld-c-slate-400: #9aa1ad;
    --ld-c-bg: #f7f7f8;
    --ld-c-border: #e5e5ea;

    /* bursztyn — akcent marki. 500 to wypełnienia, 600/700 to tekst na jasnym tle
       (500 na bieli ma ~2:1 kontrastu, więc NIE nadaje się na tekst). */
    --ld-c-amber-700: #9a5f0c;
    --ld-c-amber-600: #b4690e;
    --ld-c-amber-500: #e8a33d;
    --ld-c-amber-300: #f4cf94;

    /* kolory statusowe — semantyka, nie marka */
    --ld-c-blue-600: #2563eb;
    --ld-c-blue-300: #93b4fb;
    --ld-c-red-500: #e23b3b;
    --ld-c-green-600: #1f8a4c;
    --ld-c-green-500: #2e9e5b;
    --ld-c-teal: #14b8a6;
    --ld-c-violet-500: #7c6df0;
    --ld-c-emerald-600: #1d9e75;

    /* składowe rgb — wyłącznie do rgba() w tintach i cieniach */
    --ld-rgb-red: 226, 59, 59;
    --ld-rgb-blue: 37, 99, 235;
    --ld-rgb-amber: 232, 163, 61;
    --ld-rgb-white: 255, 255, 255;
    --ld-rgb-ink: 20, 22, 25;

    /* primitywy dociagniete z komponentow (byly wpisane hexem wprost) */
    --ld-c-blue-800: #2942a8;
    --ld-c-blue-400: #4d86ff;
    --ld-c-red-700: #c92f2f;
    --ld-c-red-200: #f0a39a;
    --ld-c-red-100: #f0cfca;
    --ld-c-red-50: #fefaf9;
    --ld-c-green-800: #0f7a58;
    --ld-c-green-200: #bfe3cb;
    --ld-c-teal-700: #0f6e56;
    --ld-c-teal-bg: #dff2ec;
    --ld-c-violet-700: #5b45b8;
    --ld-c-violet-600: #6b5bd6;
    --ld-c-violet-400: #9b8cff;
    --ld-c-slate-300: #cbd5e1;
    --ld-c-border-strong: #e2e6ec;
    /* tinty */
    --ld-c-blue-bg: #e1ecff;
    --ld-c-amber-bg: #fbe7c6;
    --ld-c-green-bg: #d8f0df;
    --ld-c-slate-bg: #f0f0f3;
    --ld-c-red-bg: #fde2e0;
    --ld-c-yellow-bg: #fcefcf;
    /* akcenty artykułów */
    --ld-c-sand: #f4e6c8;
    --ld-c-lilac: #e7e3fb;
    --ld-c-blueblk: #dce7fb;
    --ld-c-greenblk: #d8efe0;

    /* --- WARSTWA 2: role --- */
    --ld-bg: var(--ld-c-bg);
    --ld-surface: var(--ld-c-white);
    --ld-border: var(--ld-c-border);
    --ld-text-strong: var(--ld-c-ink-900);
    --ld-text-body: var(--ld-c-ink-700);
    --ld-text-muted: var(--ld-c-slate-500);

    /* marka — trzy osobne role, bo jeden token nie może być naraz
       wypełnieniem i czytelnym tekstem na białym */
    --ld-primary: var(--ld-c-amber-500);        /* wypełnienia: przyciski, aktywne taby */
    --ld-primary-ink: var(--ld-c-amber-700);    /* tekst i linki na jasnym tle */
    --ld-on-primary: var(--ld-c-graphite-900);  /* tekst na wypełnieniu marki */
    --ld-primary-soft: var(--ld-c-amber-300);
    --ld-focus-ring: rgba(var(--ld-rgb-amber), .35);

    --ld-danger: var(--ld-c-red-500);
    --ld-ok: var(--ld-c-green-500);
    --ld-warn: var(--ld-c-amber-600);
    --ld-avatar-bg: var(--ld-c-graphite-700);

    --ld-sidebar-bg: var(--ld-c-graphite-800);
    --ld-sidebar-fg: var(--ld-c-graphite-200);
    --ld-sidebar-muted: var(--ld-c-graphite-400);
    --ld-sidebar-border: rgba(var(--ld-rgb-white), .08);
    --ld-sidebar-input: rgba(var(--ld-rgb-white), .06);
    --ld-sidebar-active: var(--ld-c-graphite-700);
    --ld-sidebar-card: rgba(var(--ld-rgb-white), .04);

    --ld-status-progress-bg: var(--ld-c-blue-bg);
    --ld-status-progress-fg: var(--ld-c-blue-600);
    --ld-status-waiting-bg: var(--ld-c-amber-bg);
    --ld-status-waiting-fg: var(--ld-c-amber-600);
    --ld-status-resolved-bg: var(--ld-c-green-bg);
    --ld-status-resolved-fg: var(--ld-c-green-600);
    --ld-status-new-bg: var(--ld-c-slate-bg);
    --ld-status-new-fg: var(--ld-c-slate-500);

    --ld-prio-p1-bg: var(--ld-c-red-bg);
    --ld-prio-p1-fg: #c0392b;
    --ld-prio-p2-bg: var(--ld-c-yellow-bg);
    --ld-prio-p2-fg: var(--ld-c-amber-600);
    --ld-prio-p3-bg: var(--ld-c-slate-bg);
    --ld-prio-p3-fg: var(--ld-c-slate-500);
    --ld-prio-p4-bg: var(--ld-c-slate-bg);
    --ld-prio-p4-fg: var(--ld-c-slate-400);

    --ld-radius: 14px;
    --ld-radius-sm: 10px;
    --ld-page-pad: 28px;
    --ld-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- base ---------- */
html, body {
    height: 100%;
    margin: 0;
    font-family: var(--ld-font);
    background: var(--ld-bg);
    color: var(--ld-text-body);
}

* {
    box-sizing: border-box;
}

/* Framework pokazuje ten element ustawiajac display przy nieobsluzonym bledzie.
   Bez wlasnej reguly zostawal widoczny na dole KAZDEJ strony jako goly tekst. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    padding: 14px 20px;
    background: var(--ld-danger);
    color: var(--ld-c-white);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 -8px 24px -12px rgba(var(--ld-rgb-ink), .6);
}

#blazor-error-ui .reload {
    color: var(--ld-c-white);
    text-decoration: underline;
    margin-left: 10px;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

/* Blazor ustawia focus na h1 po nawigacji (FocusOnNavigate) — dla myszy to tylko szum,
   dla klawiatury pierscien musi zostac, stad :focus-visible. */
h1:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- responsywnosc: tokeny ukladu ---------- */
/* Odstep strony schodzi na waskich ekranach — 28px na telefonie zjada polowe tresci. */
@media (max-width: 600px) {
    :root {
        --ld-page-pad: 16px;
    }
}