/* ==========================================================================
   Akademia Claude CFS — tokeny design systemu
   ==========================================================================
   Źródło: Specyfikacja-wykonawcza-Akademia-CFS.md §2.

   ODSTĘPSTWO OD §2.1 — do akceptacji. Zieleń i czerń wzięte z oficjalnego
   logo (assets/img/cfs-logo.png, pobrane z carflowsystem.pl), nie z §2.1.
   Dwa powody:

     1. §2.1 dawało #35BA81. Logo ma #009359 — inny, wyraźnie ciemniejszy
        odcień. Zieleń w interfejsie musi zgadzać się z logo w headerze.
     2. #35BA81 z białym tekstem daje kontrast 2.47:1 — PONIŻEJ WCAG AA
        (§2 wymaga AA). Dotyczyło to przycisku primary i plakietek „ukończone".

   Rampa trzyma barwę 156° z logo i schodzi jasnością tam, gdzie na kolorze
   leży biały tekst. Kontrasty policzone, w komentarzach przy tokenach.
   ========================================================================== */

:root {
  /* --- Marka (§2.1 + logo) ----------------------------------------------
     Reguła: co ma na sobie biały tekst → `-dark` lub `-deep`.
     `--cfs-green` zostaje na obramowania, ikony i akcenty (UI wymaga 3:1). */
  --cfs-green:        #009359;  /* znak z logo — akcenty, obramowania, ikony (3.95:1) */
  --cfs-green-dark:   #00824F;  /* biały tekst NA nim (4.88:1) oraz zieleń JAKO tekst
                                   na bieli (4.88:1) i na tincie (4.50:1) — oba ✓ AA.
                                   Wiążące jest to drugie: tint jest ciemniejszy od bieli. */
  --cfs-green-deep:   #006B41;  /* hover / naciśnięcie (6.61:1) */
  --cfs-green-light:  #00C275;  /* zieleń NA ciemnym tle — grafit/stopka (6.44:1 ✓ AA) */
  --cfs-green-tint:   #EBF9F4;  /* tła sekcji, wyróżnienia */

  /* --- Neutralne -------------------------------------------------------- */
  --cfs-ink:          #1A1917;  /* tekst główny — czerń z logo (17.57:1) */
  --cfs-graphite:     #202826;  /* ciemne sekcje / stopka */
  --cfs-muted:        #65736F;  /* tekst drugorzędny — musi przejść AA na WSZYSTKICH
                                   jasnych tłach, nie tylko na bieli: biel 4.96:1,
                                   --cfs-bg-soft 4.65:1, --cfs-green-tint 4.58:1. */
  --cfs-silver:       #A5A5A5;  /* akcent industrialny (RAL 9006) */
  --cfs-line:         #E2E8E5;  /* linie, obramowania */
  --cfs-bg:           #FFFFFF;  /* tło główne */
  --cfs-bg-soft:      #F6F8F7;  /* tło alternatywne */

  /* --- Statusy / semantyka ---------------------------------------------- */
  --cfs-success:      #00824F;  /* ukończone (= zieleń marki, wariant pod biały tekst) */
  --cfs-warning:      #E5A100;  /* uwaga / moduł obowiązkowy */
  --cfs-info:         #2F80ED;  /* wskazówka */
  --cfs-danger:       #D64545;  /* zakaz / dane wrażliwe */

  /* Warianty tintowane dla tła calloutów — dobrane pod kontrast AA tekstem --cfs-ink */
  --cfs-warning-tint: #FDF4E0;
  --cfs-info-tint:    #EAF2FD;
  --cfs-danger-tint:  #FBECEC;

  /* --- Typografia (§2.2) ------------------------------------------------- */
  /* Font docelowo dopasować do carflowsystem.pl. Fallback: Inter + Montserrat.
     Tylko legalne web-fonty — patrz docs/WDROZENIE.md. */
  --font-ui:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:   "Montserrat", var(--font-ui);
  --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Skala desktop: H1 40/48, H2 30/38, H3 22/30, body 17/28, small 14/22 */
  --fs-h1: 40px;   --lh-h1: 48px;
  --fs-h2: 30px;   --lh-h2: 38px;
  --fs-h3: 22px;   --lh-h3: 30px;
  --fs-body: 17px; --lh-body: 28px;
  --fs-small: 14px;--lh-small: 22px;

  /* --- Siatka, przestrzeń, kształty (§2.3) ------------------------------- */
  --container: 1120px;   /* max szerokość kontenera treści */
  --measure:   768px;    /* kolumna tekstu w lekcji (§4.5: ~720) */
  --pad:       24px;     /* padding kontenera (16 na mobile) */

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  --radius-card: 16px;
  --radius-btn:  10px;
  --radius-pill: 999px;

  --shadow-card: 0 6px 24px rgba(20, 32, 28, .08);

  /* --- Motion (§2.4) ----------------------------------------------------- */
  --ease:     cubic-bezier(.2, .7, .3, 1);   /* ease-out */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* --- Warstwy ---------------------------------------------------------- */
  --z-header: 100;
  --z-toast:  200;
  --z-modal:  300;
}

/* Mobile ~85% skali (§2.2) */
@media (max-width: 720px) {
  :root {
    --fs-h1: 34px;   --lh-h1: 41px;
    --fs-h2: 26px;   --lh-h2: 32px;
    --fs-h3: 19px;   --lh-h3: 26px;
    --fs-body: 16px; --lh-body: 26px;
    --pad: 16px;
  }
}

/* §2.4 — respektować prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}