/* ==========================================================================
   Akademia Projekt481 – TOKENY (Neumorfizm 2.0, WCAG 2.2 AA)
   Jedyne miejsce z wartościami. Komponenty używają wyłącznie tych zmiennych.

   Zasady:
   - Kolory marki (--c-*) służą do wypełnień, ikon i akcentów.
     Do TEKSTU zawsze warianty --text-* (≥ 4,5:1 na tle i na kartach).
   - Tekst na wypełnieniu: tylko wypełnienia --fill-* (biały tekst ≥ 4,5:1).
   - Krawędź kontrolki, której trzeba „znaleźć” (pole, stan wyboru): --edge (≥ 3:1).
   - Cienie neumorficzne są dekoracją – nigdy jedynym nośnikiem informacji.
   - Przełamania (wpisywane liczbami w @media): 360px (telefon), 768px (tablet), 1120px (komputer).
   - Wysoki kontrast: klasa .hc na <html> (przycisk w panelu Dostępność)
     albo ustawienie systemu (prefers-contrast: more) – te same zmienne, inne wartości.
   ========================================================================== */
:root {
  /* marka */
  --c-navy: #4a478f;
  --c-pink: #d93c76;
  --c-green: #4ac201;
  --c-gold: #ecc440;        /* tylko grafika na ciemnym lub jako wypełnienie z obrysem (gwiazdka) – na jasnym tle 1,4 : 1 */
  --c-blue: #0a78c2;        /* 3,4–4,7 : 1 – niebieski grafiki (pierścień, słupki, ikony) = jasny koniec --fill-primary */
  --c-blue-light: #39ddfa;
  --c-teal: #00dfeb;

  /* tło i powierzchnie */
  --bg: #ebebef;
  --surface: linear-gradient(145deg, #f4f4f8, #e3e3e9);          /* karty, panele */
  --surface-btn: linear-gradient(145deg, #f8f8fc, #dcdce5);      /* przyciski wypukłe */
  --surface-pressed: linear-gradient(145deg, #dcdce5, #f3f3f8);  /* wciśnięte / wybrane */
  --surface-solid: #eeeef3;                                      /* gdy gradient nie wchodzi w grę */
  --scrim: rgba(42, 40, 90, .45);                                /* tło pod oknem */

  /* Biała „kartka” w oknie ćwiczenia: arkusz tabeli (GRID) na grafice, dymek rozmowy z AI, ramka PDF.
     Te miejsca mają wyglądać jak papier, a nie jak panel platformy – ale mają reagować na wysoki kontrast. */
  --surface-paper: #ffffff;
  --surface-paper-off: #f4f4f8;   /* pole na kartce bez edycji */
  --text-paper: #1d1b4b;

  /* tekst (kontrast na #ebebef / najciemniejszej karcie #e3e3e9) */
  --text: #4a478f;          /* 6,8 / 6,4 : 1 – treść, tytuły */
  --text-muted: #565c7c;    /* 5,5 / 5,1 : 1 – meta, podpisy, placeholder */
  --text-pink: #ad2458;     /* 5,6 / 5,2 : 1 – różowy tekst każdej wielkości (błędy, akcenty, wyróżnienia w nagłówkach); róż marki --c-pink tylko w grafice */
  --text-ok: #2a6e00;       /* 5,3 / 4,9 : 1 – „zrobione” w tekście; obrys zielonych pierścieni i pasków postępu (--ok-outline) */
  --text-warn: #8a6100;     /* 4,7 / 4,3 : 1 – ciemne złoto: gwiazdka oceny, pierścień wyniku średniego, krzywa wykresu */
  --text-on-fill: #ffffff;

  /* krawędzie i fokus */
  --edge: #6f6e94;          /* 4,1 / 3,8 : 1 (na wciśniętym 3,6 : 1) – obrys pól, także na białej kartce ćwiczenia; stan wybrany */
  --line: rgba(124, 123, 160, .3);   /* linia podziału (dekoracja) */
  --line-strong: rgba(124, 123, 160, .5);   /* separator w pasku narzędzi */
  --on-fill: #fff;          /* tekst i ikony na wypełnieniach (--fill-*, --sim-*, --ai) */
  --on-gold: #4a3a00;       /* tekst i ikony na złotym (--sim-shop) */
  --track: #e1e1e9;         /* tor pierścienia postępu */
  --rating-glow: rgba(245, 190, 20, .6);   /* poświata gwiazdki oceny (wypełnienie --c-gold, obrys --text-warn) */
  --fill-avatar: linear-gradient(145deg, #6d69c9, #4a478f); --avatar-ring: #f4f4f8;
  --bg-fade: rgba(235, 235, 239, 0);   /* przejście zdjęcia nagłówka w tło strony */
  --dash-shape-fill: linear-gradient(145deg, #f6f6fa, #e2e2e9);   /* skos pod kartą strony głównej */
  --dash-shape-shadow: drop-shadow(14px 14px 22px rgba(120, 120, 150, .5)) drop-shadow(-4px -4px 10px rgba(255, 255, 255, .8));
  --dot-idle: #b3b8cc;   /* kropka stanu „nie wybrano” (makieta .wz-dot) – stan niesie też aria-pressed */
  --ok-outline: drop-shadow(1px 0 0 var(--text-ok)) drop-shadow(-1px 0 0 var(--text-ok)) drop-shadow(0 1px 0 var(--text-ok)) drop-shadow(0 -1px 0 var(--text-ok));   /* filter: ciemny obrys 1 px wokół jasnej zieleni marki (sama ma 2 : 1) */
  --ok-ring: rgba(74, 194, 1, .18);   /* poświata zaznaczonej kropki */
  --dot-inset: inset 1px 1px 2px rgba(0, 0, 0, .12);
  --focus: #ad2458;         /* ramka fokusu */
  --focus-w: 3px;
  --focus-off: 3px;

  /* wypełnienia z białym tekstem */
  --fill-primary: linear-gradient(145deg, #0a78c2, #0a5c9e);   /* 4,7–6,9 : 1 */
  --fill-danger: linear-gradient(145deg, #c8306a, #ad2458);    /* 5,1–5,6 : 1 */
  --fill-ok: linear-gradient(145deg, #2f7d00, #276a00);        /* 5,2–6,5 : 1 */
  --fill-navy: #4a478f;                                        /* 7,6 : 1 */
  --fill-warn: #8a6100;                                        /* 5,4 : 1 */

  /* kolory rodzajów symulacji (plakietki; ikona na wypełnieniu, bez tekstu – biała ikona ≥ 3 : 1 na całym gradiencie) */
  --sim-shop: linear-gradient(145deg, #ffd84a, #f5c518 55%, #d9a800);
  --sim-product: linear-gradient(145deg, #35a26d, #2f9a66 55%, #237f52);   /* biała ikona 3,2–5,0 : 1 */
  --sim-service: linear-gradient(145deg, #8489cc, #7175bd 55%, #5d61a6);   /* 3,3–5,6 : 1 */
  --sim-micro: linear-gradient(145deg, #ee4a3c, #eb0201 55%, #b50000);     /* 3,7–7,1 : 1 */
  --ai: linear-gradient(145deg, #1a98d6, #0a78c2);                         /* 3,2–4,7 : 1 */

  /* cienie (neumorfizm) */
  --sh-dark: rgba(170, 170, 190, .55);
  --sh-dark-2: rgba(170, 170, 190, .35);
  --sh-light: #ffffff;
  --raised-sm: 3px 3px 6px var(--sh-dark), -3px -3px 6px var(--sh-light);
  --raised-md: 7px 7px 14px var(--sh-dark), 2px 2px 4px var(--sh-dark-2), -7px -7px 14px var(--sh-light), -2px -2px 4px var(--sh-light);
  --raised-lg: 10px 10px 20px var(--sh-dark), 3px 3px 6px var(--sh-dark-2), -10px -10px 20px var(--sh-light), -3px -3px 6px var(--sh-light);
  --inset-sm: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light);
  --icon-emboss: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(.5px 1px 1px rgba(40, 38, 90, .35));   /* wytłoczona ikona w wypukłym przycisku (makieta .c-btn) */
  --inset-md: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
  --float: 0 6px 14px rgba(40, 38, 90, .3);                    /* podpowiedzi, dymki, toasty */
  --modal: 0 30px 80px rgba(20, 18, 60, .35);

  /* promienie */
  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 20px;
  --r-lg: 25px;
  --r-pill: 999px;

  /* odstępy (siatka 4 px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-1-5: 6px; --s-2-5: 10px;   /* stopnie pośrednie (połówki skali) – ciasne odstępy w kartach, listach i między ikoną a napisem */
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: clamp(16px, 4vw, 40px);   /* margines boczny strony */
  --page-max: 1140px;

  /* typografia */
  --font: Montserrat, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-xs: 11px;    /* etykiety wersalikami, meta */
  --fs-sm: 12.5px;  /* treść pomocnicza, przyciski */
  --fs-md: 14px;    /* treść */
  --fs-lg: 16px;    /* pola formularza (telefon nie przybliża), nagłówki kart */
  --fs-xl: 19px;    /* nagłówki sekcji */
  --fs-2xl: 24px;   /* nagłówek strony na telefonie */
  --fs-3xl: 30px;   /* nagłówek strony */
  --lh: 1.45;
  --lh-tight: 1.2;
  --ls-caps: .06em;

  /* rozmiary kontrolek */
  --h-sm: 34px;
  --h-md: 40px;
  --h-lg: 50px;
  --target-min: 24px;   /* WCAG 2.5.8 */

  /* ruch */
  --t-fast: .15s;
  --t: .3s;

  /* warstwy globalne (skala Bootstrapa: 1020 sticky, 1030 fixed, 1050 modal, 1070 tooltip); wartości 1–25 w stronach są lokalne dla kart i pasków */
  --z-below: -1;    /* dekoracja pod treścią (skos pod kartą strony głównej, puls mikrofonu) */
  --z-raised: 1;    /* nad sąsiadem w tym samym kontenerze (strzałki paska, nagłówek tabeli, numer na karcie) */
  --z-over-link: 2; /* nad rozciągniętym linkiem karty i elementami obok (akcje, plakietki, „+”) */
  --z-active: 3;    /* element aktywny nad sąsiadami (najechana karta, pasek nad siatką, przycisk w polu) */
  --z-strip: 5;     /* pasek przedmiotów nad zdjęciem nagłówka; plakietka karty przy najechaniu */
  --z-page-top: 6;  /* pasek górny nad paskiem przedmiotów (podpowiedź „Strona główna”) */
  --z-pop: 20;      /* panel wyskakujący w treści strony (lista dnia w kalendarzu) */
  --z-pop-active: 25; /* panel wyskakujący przy najechaniu – nad sąsiednim panelem */
  --z-side: 1030;   /* narzędzia dostępności i pomocy przy krawędzi */
  --z-drag: 1060;   /* element przeciągany wskaźnikiem – nad oknem (Bootstrap: okno 1055) */
  --z-tip: 1070;    /* podpowiedzi data-tip */
  --z-skip: 1100;   /* link „Przejdź do treści” nad wszystkim */
}

/* Wysoki kontrast – ręcznie (panel Dostępność) albo z ustawień systemu.
   Cienie zamieniają się w ramki 2 px, powierzchnie na białe, tekst ciemnieje. */
:root.hc {
  --surface: linear-gradient(#fff, #fff); --surface-btn: linear-gradient(#fff, #fff); --surface-pressed: linear-gradient(#e4e3f2, #e4e3f2); --surface-solid: #ffffff;  /* gradienty – idą do background-image */
  --text: #2c2a5e; --text-muted: #2c2a5e; --text-pink: #8e1a47; --text-ok: #1f5200;
  --edge: #2c2a5e; --focus: #1b1a40; --focus-w: 3px; --line: #2c2a5e;
  --fill-primary: linear-gradient(#2c2a5e, #2c2a5e); --fill-danger: linear-gradient(#8e1a47, #8e1a47); --fill-ok: linear-gradient(#1f5200, #1f5200);
  --raised-sm: 0 0 0 2px #2c2a5e; --raised-md: 0 0 0 2px #2c2a5e; --raised-lg: 0 0 0 2px #2c2a5e;
  --inset-sm: inset 0 0 0 2px #2c2a5e; --inset-md: inset 0 0 0 2px #2c2a5e; --icon-emboss: none;
  --surface-paper-off: #ffffff; --text-paper: #2c2a5e; --text-warn: #6b4700;
}
@media (prefers-contrast: more) {
  :root {
    --surface: linear-gradient(#fff, #fff); --surface-btn: linear-gradient(#fff, #fff); --surface-pressed: linear-gradient(#e4e3f2, #e4e3f2); --surface-solid: #ffffff;  /* gradienty – idą do background-image */
    --text: #2c2a5e; --text-muted: #2c2a5e; --text-pink: #8e1a47; --text-ok: #1f5200;
    --edge: #2c2a5e; --focus: #1b1a40; --line: #2c2a5e;
    --fill-primary: linear-gradient(#2c2a5e, #2c2a5e); --fill-danger: linear-gradient(#8e1a47, #8e1a47); --fill-ok: linear-gradient(#1f5200, #1f5200);
    --raised-sm: 0 0 0 2px #2c2a5e; --raised-md: 0 0 0 2px #2c2a5e; --raised-lg: 0 0 0 2px #2c2a5e;
    --inset-sm: inset 0 0 0 2px #2c2a5e; --inset-md: inset 0 0 0 2px #2c2a5e; --icon-emboss: none;
    --surface-paper-off: #ffffff; --text-paper: #2c2a5e; --text-warn: #6b4700;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; }
}

/* Zgodność wstecz: stare nazwy z makiet i mainNeu.css → nowe tokeny.
   Pozwala przepinać strony po kolei, bez przepisywania wszystkiego naraz. */
:root {
  --granat: var(--c-navy); --pink: var(--c-pink); --green: var(--c-green); --gold: var(--c-gold); --yellow: var(--c-gold);
  --primary-dark: var(--c-blue); --primary-light: var(--c-blue-light); --teal: var(--c-teal);
  --backgroundColor: var(--bg); --greyDark: var(--text-muted);
  --neu-surface: var(--surface); --neu-surface-btn: var(--surface-btn); --neu-surface-pressed: var(--surface-pressed);
  --neu-raised-sm: var(--raised-sm); --neu-raised-md: var(--raised-md); --neu-raised-lg: var(--raised-lg);
  --neu-inset-sm: var(--inset-sm); --neu-inset-md: var(--inset-md);
  --sans: var(--font);
}