/*
  AI Lab - design tokens
  Zmień wartości poniżej, żeby zaktualizować kolorystykę/typografię
  we wszystkich przyszłych materiałach. To jest jedyne źródło prawdy -
  nie twórz nowej palety przy kolejnych plikach, chyba że użytkownik
  poprosi o inny kierunek.

  Kolory pochodzą wprost z brand/assets/logo*.svg (nie są wymyślone):
  pomarańcz i fiolet to jedyne dwa kolory znaku, biel to wariant logo_white.
*/

:root {
  /* --- kolory: tryb jasny (domyślny) --- */
  --white: #FFFFFF;
  --purple: #58195F;       /* z logo.svg - wordmark "ai", tło pod logo_dark */
  --purple-muted: #8A5590; /* jaśniejszy fiolet - tekst drugorzędny, jasne tło */
  --orange: #FF4E00;       /* z logo.svg - ikona + "lab", jedyny mocny akcent/CTA */
  --orange-soft: #FFE4D6;  /* jasny podkład pod orange, np. odznaki */

  --bg: #FFFFFF;
  --surface: #F8F8F8;
  --surface-2: #EEEEEE;    /* neutralna szarość - panele drugorzędne */
  --ink: #2F2F2F;          /* tekst podstawowy i nagłówki */
  --ink-muted: #8A5590;
  --rule: #E4D9E3;         /* linie, obramowania */

  /* Fiolet marki użyty jako *atrament* - nagłówki, linki, ikony na tle strony.
     W trybie ciemnym tłem jest sam fiolet, więc token przechodzi na biel.
     Tym różni się od --purple, który zostaje fioletem w obu trybach, bo
     opisuje kolor marki jako powierzchnię (plakietka, tooltip), nie tekst. */
  --brand-ink: #58195F;
  --brand-ink-muted: #8A5590;

  /* Stan funkcjonalny UI (ok / wykonane) - NIE z logo. Nie używać jako tła
     sekcji ani ikon grupowych; tylko stan „ok / wykonane”. */
  --success: #1B7A4A;

  /* --- typografia --- */
  --font-display: 'Comfortaa', ui-rounded, "Segoe UI", sans-serif;              /* logo, nagłówki */
  --font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, "Segoe UI", sans-serif; /* tekst */

  /* --- skala: h1 16pt, każdy kolejny nagłówek -2pt, tekst = rozmiar h3 --- */
  --fs-h1: 1.333rem; /* 16pt ≈ 21px */
  --fs-h2: 1.167rem; /* 14pt ≈ 19px */
  --fs-h3: 1rem;     /*  12pt ≈ 16px */
  --fs-body: 1rem;   /*  12pt ≈ 16px - tej samej wielkości co h3 */

  /* Paski przewijania i natywne kontrolki idą za motywem strony. */
  color-scheme: light;
}

/* --- kolory: tryb ciemny, ustawienia systemowe --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #58195F;          /* fiolet jako tło - jak w logo_dark ("na purpurowym tle") */
    --surface: #47134D;
    --surface-2: #3A0F40;
    --ink: #FFFFFF;         /* jak w logo_white */
    --ink-muted: #D9B9DC;
    --rule: rgba(255, 255, 255, 0.18);

    --orange: #FF4E00;      /* bez zmian - mocny kontrast na fiolecie */
    --orange-soft: rgba(255, 78, 0, 0.18);

    --brand-ink: #FFFFFF;
    --brand-ink-muted: #D9B9DC;
    --success: #6FCF97; /* ten sam token, jaśniejszy na fioletowym tle */
    color-scheme: dark;
  }
}

/* --- kolory: tryb ciemny, wybrany ręcznie w interfejsie --- */
:root[data-theme="dark"] {
  --bg: #58195F;
  --surface: #47134D;
  --surface-2: #3A0F40;
  --ink: #FFFFFF;
  --ink-muted: #D9B9DC;
  --rule: rgba(255, 255, 255, 0.18);

  --orange: #FF4E00;
  --orange-soft: rgba(255, 78, 0, 0.18);

  --brand-ink: #FFFFFF;
  --brand-ink-muted: #D9B9DC;
  --success: #6FCF97; /* ten sam token, jaśniejszy na fioletowym tle */
  color-scheme: dark;
}