/* =============================================================
   MOTYW: ŻÓŁTY DOMINUJĄCY (jak pojazd ADAC)
   -------------------------------------------------------------
   Duże żółte płaszczyzny, czarna typografia. Sekcje na przemian
   żółte i czarne — jak lakier i naklejki na lawecie.

   To JEDYNY plik z kolorami. base.css jest identyczny
   w obu wariantach i nie wymaga żadnych zmian.

   SZTUCZKA: w strefie żółtej kolorem akcentu (--brand) jest
   CZERŃ, a tekstem na akcencie (--on-brand) jest ŻÓŁĆ.
   W strefach ciemnych role się odwracają. Dzięki temu każdy
   przycisk, ikona i etykieta ma prawidłowy kontrast bez
   dotykania base.css.
   ============================================================= */

:root {
  /* --- Akcent w strefie ŻÓŁTEJ = czerń --------------------- */
  --brand:            #0A0C0E;
  --brand-strong:     #1C2128;
  --brand-deep:       #000000;
  --on-brand:         #FFCC00;

  /* --- Powierzchnie --------------------------------------- */
  --bg:               #FFCC00;   /* żółty ADAC — tło strony */
  --surface:          #FFFFFF;   /* białe karty na żółtym */
  --surface-2:        #FFF6D6;   /* hover / podniesione */
  --surface-inset:    #FFF0BE;   /* wgłębienia, pola ikon */

  /* --- Tekst ---------------------------------------------- */
  --text:             #0A0C0E;   /* 12.6:1 na żółtym, 19:1 na białym */
  --text-muted:       #4A4536;   /*  6.4:1 na żółtym, 9.6:1 na białym */
  --text-faint:       #6E6752;
  --text-on-light:    #0A0C0E;

  /* --- Linie ---------------------------------------------- */
  --line:             rgba(10, 12, 14, .20);
  --line-strong:      rgba(10, 12, 14, .55);

  /* --- Sekcje naprzemienne -------------------------------- */
  --band:             #0B0D10;   /* czarne pasy przecinające żółty */

  /* --- Nagłówek / stopka (ciemne) ------------------------- */
  --header-bg:        rgba(11, 13, 16, .88);
  --header-bg-solid:  #0B0D10;
  --footer-bg:        #08090B;

  /* --- Stany ---------------------------------------------- */
  --focus:            #0A0C0E;
  --danger:           #C81E1E;
  --success:          #1E8E4F;

  /* --- Cienie --------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.18);
  --shadow-md:  0 8px 24px -10px rgba(0,0,0,.35);
  --shadow-lg:  0 24px 60px -24px rgba(0,0,0,.45);
  --shadow-brand: 0 10px 30px -12px rgba(0,0,0,.45);

  /* --- Przyciemnienie zdjęć ------------------------------- */
  --img-scrim: linear-gradient(180deg,
                 rgba(11,13,16,.30) 0%,
                 rgba(11,13,16,.55) 45%,
                 rgba(11,13,16,.94) 100%);
  --img-scrim-side: linear-gradient(100deg,
                 rgba(11,13,16,.96) 0%,
                 rgba(11,13,16,.80) 42%,
                 rgba(11,13,16,.28) 100%);

  color-scheme: light;
}

/* =============================================================
   STREFY CIEMNE
   -------------------------------------------------------------
   Nagłówek, menu, hero, czarne pasy sekcji i stopka.
   Tutaj akcentem znów jest ŻÓŁĆ — czyli odwrotnie niż wyżej.
   Zmienne dziedziczą się w dół, więc wystarczy nadpisać je
   na kontenerze sekcji.
   ============================================================= */

.topbar,
.header,
.drawer,
.hero,
.pagehead,
.section--band,
.cta,
.footer {
  --brand:          #FFCC00;
  --brand-strong:   #FFD633;
  --on-brand:       #0A0C0E;

  --surface:        #14181D;
  --surface-2:      #1C2128;
  --surface-inset:  #0E1114;

  --text:           #F2F4F6;
  --text-muted:     #A5AEB8;
  --text-faint:     #7E8894;   /* 4.9:1 na tle stopki — spełnia WCAG AA */

  --line:           #262C34;
  --line-strong:    #38414C;

  --focus:          #FFCC00;

  /* WAŻNE: sama zmiana --text nie wystarczy.
     Kolor tekstu jest dziedziczony z <body> jako gotowa wartość,
     więc trzeba go tutaj policzyć jeszcze raz — inaczej nagłówki
     w czarnych sekcjach zostałyby czarne na czarnym. */
  color: var(--text);
}

/* Czarne pasy sekcji faktycznie na czarno */
.section--band { background: var(--band); }

/* =============================================================
   POJEDYNCZE POPRAWKI
   ============================================================= */

/* Pas CTA — czarny blok z żółtymi przyciskami.
   (base.css nadaje mu tło --brand, które w strefie ciemnej
    jest żółte, więc tutaj przestawiamy je na czerń.) */
.cta { background: #0B0D10; color: #F2F4F6; }
.cta__text { opacity: .78; }
.cta .btn-call { background: var(--brand); color: var(--on-brand); }
.cta .btn-call:hover { background: var(--brand-strong); }
.cta .btn-call__ico { background: rgba(0,0,0,.16); }

/* Przyklejony pasek alarmowy — celowo POZA strefą ciemną,
   żeby był czarny i nigdy nie zlewał się z żółtą stroną. */
.callbar { border-top-color: #0A0C0E; }
.callbar__main { background: #0B0D10; color: #FFCC00; }
.callbar__alt  { background: #1C2128; color: #F2F4F6; }
.callbar__alt:hover { color: #FFCC00; }

/* Kafelki statystyk — żółte tło, czarne liczby */
.stat { background: var(--bg); }

/* Karty na białym tle — delikatny cień zamiast ciemnej obwódki */
.card,
.offer,
.info__row { border-color: rgba(10,12,14,.14); box-shadow: var(--shadow-sm); }
.card:hover,
.offer:hover { border-color: rgba(10,12,14,.42); }
.quote { box-shadow: var(--shadow-sm); }

/* Podpowiedź języka — biała belka na żółtym tle */
.langhint { background: #FFFFFF; border-color: rgba(10,12,14,.25); }

/* Powrót na górę — czarny krążek, dobrze widoczny na żółtym */
.totop { background: #0B0D10; color: #FFCC00; border-color: #0A0C0E; }
.totop:hover { background: #1C2128; color: #FFCC00; }

/* Pas ostrzegawczy pozostaje żółto-czarny w obu strefach */
.hazard {
  background: repeating-linear-gradient(-45deg, #FFCC00 0 14px, #0A0C0E 14px 28px);
}