/* LightLife — kolory. Paleta bazowa wprost z brandbooku (PALETA KOLORÓW). */
:root {
  /* Baza (z brandbooku) */
  --white: #FFFFFF;
  --cream: #F7F6F3;   /* tło stron i sekcji */
  --sand:  #E7E3DE;   /* wypełnienia pomocnicze, tła pigułek */
  --stone: #D9D6D1;   /* obramowania, linie podziału */
  --ink:   #1B1F23;   /* czerń marki — nagłówki, przycisk główny */
  --gold:  #C89A5B;   /* złoto — akcent, ikony, detale */

  /* Rampa złota */
  --gold-100: #F4ECDF;
  --gold-200: #E8D5B4;
  --gold-600: #A97C41; /* złoto na tekst / hover */

  /* Pastele złota — dokładnie jak Respo: 2 poziomy. baza (--gold) × biel; wybrany = 12%, hover i rozwinięty tekst = 6% (2× słabszy, ten sam kolor) */
  --gold-pastel-1: color-mix(in srgb, var(--gold) 12%, #fff); /* mocniejszy — element wybrany (~#F8F3EB) */
  --gold-pastel-2: color-mix(in srgb, var(--gold) 6%, #fff);  /* słabszy — hover na boxie (~#FCF9F5) */
  --gold-pastel-3: color-mix(in srgb, var(--gold) 6%, #fff);  /* ten sam co hover — rozwinięty tekst (Respo: hover = treść) */

  /* Pastele niebieskiego — belka promocyjna (ta sama formuła baza × biel): body 12%, rant 6% */
  --blue-pastel-1: color-mix(in srgb, var(--blue) 12%, #fff); /* body 12% (~#E9EEF3) */
  --blue-pastel-2: color-mix(in srgb, var(--blue) 6%, #fff);  /* najsłabszy 6% (~#F4F7F9) */
  --blue-pastel-3: color-mix(in srgb, var(--blue) 25%, #fff); /* mocniejszy akcent 25% */

  /* Pastele coral (baza --danger) — analogicznie */
  --coral-pastel-1: color-mix(in srgb, var(--danger) 12%, #fff); /* body 12% (~#F4EBE9) */
  --coral-pastel-2: color-mix(in srgb, var(--danger) 6%, #fff);  /* najsłabszy 6% (~#FAF5F4) */
  --coral-pastel-3: color-mix(in srgb, var(--danger) 25%, #fff); /* mocniejszy akcent 25% */

  /* Rampa atramentu (ciepła szarość) */
  --ink-2: #464B51;   /* tekst akapitowy */
  --ink-3: #70757A;   /* tekst przygaszony, podpisy */
  --ink-4: #A3A7AA;   /* placeholdery, wyłączone */

  /* Kolory funkcyjne (z UI aplikacji: czat, wykresy, linki, paski postępu) */
  --blue:     #46719C;
  --blue-100: #E9EFF5;
  --danger:     #A65B4B; /* rozszerzenie: błędy formularzy (brak w brandbooku) */
  --danger-100: #F4E6E2;

  /* Aliasy semantyczne */
  --surface-page:    var(--cream);
  --surface-card:    var(--white);
  --surface-soft:    var(--sand);
  --surface-inverse: var(--ink);
  --surface-accent:  var(--gold-100);

  --text-heading:    var(--ink);
  --text-body:       var(--ink-2);
  --text-muted:      var(--ink-3);
  --text-faint:      var(--ink-4);
  --text-accent:     var(--gold-600);
  --text-link:       var(--blue);
  --text-on-inverse: #FFFFFF;
  --text-on-inverse-muted: rgba(255,255,255,.64);

  --border-soft:   #ECE9E4;
  --border-strong: var(--stone);
  --border-accent: var(--gold);

  --focus-ring: 0 0 0 3px rgba(200,154,91,.35);
}