/*
 * TOKENY – jedyne miejsce z surowymi wartościami (kolory, rozmiary, fonty).
 * Reszta CSS używa wyłącznie var(--…).
 *
 * Dwie warstwy:
 *  1. paleta surowa  (--accent-50 … --accent-900, --gray-…) – NIE zależy od trybu,
 *     to ją nadpisują motywy (themes/*.css);
 *  2. tokeny semantyczne (--color-bg, --color-text …) – mapują paletę na role,
 *     osobno dla trybu jasnego i ciemnego.
 *
 * Tryb ciemny: automatycznie wg systemu, chyba że <html data-mode="light">;
 * wymuszony przez <html data-mode="dark">.
 */

:root {
  color-scheme: light dark;

  /* ---------- Paleta surowa: akcent (granat/niebieski) ---------- */
  --accent-50:  #eef3fb;
  --accent-100: #dbe6f6;
  --accent-200: #b9cdec;
  --accent-300: #8eaede;
  --accent-400: #6a8fd0;
  --accent-500: #4a72b8;
  --accent-600: #2f5a9e;
  --accent-700: #264a82;
  --accent-800: #1f3b68;
  --accent-900: #182d4f;

  /* ---------- Paleta surowa: szarości (lekko chłodne) ---------- */
  --gray-0:   #ffffff;
  --gray-50:  #f6f7f9;
  --gray-100: #eceef2;
  --gray-200: #dde0e6;
  --gray-300: #c3c8d1;
  --gray-500: #6b7280;
  --gray-600: #525a67;
  --gray-800: #232832;
  --gray-900: #151922;

  /* ---------- Typografia ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;   /* gęsty interfejs: 14px */
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --tracking-caps: 0.04em;

  /* ---------- Odstępy (skala 4 px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------- Kształt ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-full: 999px;
  --border-width: 1px;

  /* ---------- Układ ---------- */
  --preview-height: 75vh;
  --sidebar-width: 15.5rem;
  --content-max: 82rem;
  --control-height: 2.25rem;
  --control-height-sm: 1.875rem;
  --breakpoint-note: 900px; /* informacyjnie; media query nie przyjmują zmiennych */
  --transition: 120ms ease-out;

  /* ---------- Semantyka: tryb jasny ---------- */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-2: var(--gray-50);       /* nagłówki tabel, podkład pól */
  --color-surface-hover: var(--gray-100);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-accent: var(--accent-600);       /* tło przycisku głównego */
  --color-accent-hover: var(--accent-700);
  --color-accent-contrast: #ffffff;        /* tekst na akcencie */
  --color-accent-text: var(--accent-700);  /* linki, aktywne pozycje */
  --color-accent-soft: var(--accent-50);   /* tło aktywnej pozycji menu */
  --color-focus: var(--accent-400);

  --color-ok: #1b7a43;
  --color-ok-bg: #e4f4ea;
  --color-warn: #8a5a00;
  --color-warn-bg: #fdf1d6;
  --color-danger: #b42318;
  --color-danger-bg: #fde8e6;
  --color-info: #1d5fa8;
  --color-info-bg: #e3eefa;
  --color-muted-bg: var(--gray-100);

  --color-sidebar-bg: var(--gray-0);
  --color-sidebar-text: var(--gray-800);
  --color-overlay: rgb(21 25 34 / 0.45);

  --shadow-sm: 0 1px 2px rgb(21 25 34 / 0.06);
  --shadow-md: 0 4px 12px rgb(21 25 34 / 0.10);
}

/* ---------- Semantyka: tryb ciemny (wg systemu) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --color-bg: #0f131a;
    --color-surface: #171c25;
    --color-surface-2: #1c222d;
    --color-surface-hover: #232a37;
    --color-text: #e8ebf0;
    --color-text-muted: #9aa3b2;
    --color-border: #2a3140;
    --color-border-strong: #3a4357;

    --color-accent: var(--accent-500);
    --color-accent-hover: var(--accent-400);
    --color-accent-contrast: #ffffff;
    --color-accent-text: var(--accent-300);
    --color-accent-soft: rgb(106 143 208 / 0.16);
    --color-focus: var(--accent-300);

    --color-ok: #6fd193;
    --color-ok-bg: rgb(60 170 105 / 0.16);
    --color-warn: #f0c060;
    --color-warn-bg: rgb(220 160 40 / 0.16);
    --color-danger: #f28b82;
    --color-danger-bg: rgb(230 80 70 / 0.16);
    --color-info: #7db4ee;
    --color-info-bg: rgb(80 140 220 / 0.16);
    --color-muted-bg: #232a37;

    --color-sidebar-bg: #131822;
    --color-sidebar-text: #e8ebf0;
    --color-overlay: rgb(0 0 0 / 0.6);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
  }
}

/* ---------- Semantyka: tryb ciemny (wymuszony) ---------- */
:root[data-mode="dark"] {
  --color-bg: #0f131a;
  --color-surface: #171c25;
  --color-surface-2: #1c222d;
  --color-surface-hover: #232a37;
  --color-text: #e8ebf0;
  --color-text-muted: #9aa3b2;
  --color-border: #2a3140;
  --color-border-strong: #3a4357;

  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-400);
  --color-accent-contrast: #ffffff;
  --color-accent-text: var(--accent-300);
  --color-accent-soft: rgb(106 143 208 / 0.16);
  --color-focus: var(--accent-300);

  --color-ok: #6fd193;
  --color-ok-bg: rgb(60 170 105 / 0.16);
  --color-warn: #f0c060;
  --color-warn-bg: rgb(220 160 40 / 0.16);
  --color-danger: #f28b82;
  --color-danger-bg: rgb(230 80 70 / 0.16);
  --color-info: #7db4ee;
  --color-info-bg: rgb(80 140 220 / 0.16);
  --color-muted-bg: #232a37;

  --color-sidebar-bg: #131822;
  --color-sidebar-text: #e8ebf0;
  --color-overlay: rgb(0 0 0 / 0.6);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
}