/* Lexina Delivery — token-uri de brand extrase din logo
   Include o singură dată, înaintea CSS-ului fiecărei pagini. */

:root {
  /* Culorile mărcii, măsurate din logo */
  --lx-blue-light: #47A8F7;   /* aripa, capătul deschis */
  --lx-blue:       #3687FC;   /* aripa, capătul închis + pin */
  --lx-blue-ink:   #4F77BF;   /* „SOLUTION" */
  --lx-red:        #F70200;   /* „LEXINA" */
  --lx-gray:       #767676;   /* „DELIVERY" pe fundal închis */
  --lx-gray-ink:   #2F3238;   /* „DELIVERY" pe fundal deschis */
  --lx-black:      #000000;

  /* Derivate utile în interfețe */
  --lx-wing-gradient: linear-gradient(135deg, var(--lx-blue-light), var(--lx-blue));
  --lx-surface:       #F4F6F9;
  --lx-border:        #E2E6EC;

  /* Înălțimea logo-ului în bara de sus */
  --lx-logo-h: 38px;
}

/* Roșul din logo (#F70200) e prea saturat pentru butoane și link-uri.
   Folosește-l doar ca accent (badge „URGENT", erori), iar acțiunile
   principale pe albastru — altfel interfața concurează cu logo-ul. */

.lx-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid var(--lx-border);
}

.lx-header--dark {
  background: var(--lx-black);
  border-bottom-color: #1A1A1A;
}

.lx-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.lx-logo img {
  height: var(--lx-logo-h);
  width: auto;
  display: block;
}

/* Sub 480px afișează doar marca, nu tot lockup-ul */
.lx-logo__mark { display: none; }

@media (max-width: 480px) {
  .lx-logo__lockup { display: none; }
  .lx-logo__mark   { display: block; }
}

/* Ecranul de login: marca mare, centrată */
.lx-login-mark {
  width: 96px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .lx-login-mark { animation: lx-fade-up .5s ease-out both; }
}

@keyframes lx-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}