/* !
 * SuperQube – pomocné barvy a utility pro Bootstrap / Bootstrap Studio
 * Tento soubor NENAHRAZUJE Bootstrap, jen přidává barvy a classy. */

/* ------------------------------------------------------------------
   1) CSS proměnné – SuperQube paleta
   ------------------------------------------------------------------ */

:root {
  --SuperQubeRed-L10: #FFD2CA;
  --SuperQubeRed-L9: #FFB2A5;
  --SuperQubeRed-L8: #FF8F7B;
  --SuperQubeRed-L7: #FF674C;
  --SuperQubeRed-L6: #FD2600;
  --SuperQubeRed-L5: #D82000;
  --SuperQubeRed-L4: #B21A00;
  --SuperQubeRed-L3: #8C1500;
  --SuperQubeRed-L2: #6B1000;
  --SuperQubeRed-L1: #480B00;
  --SuperQubeBlue: #0b5cf9;
  --SuperQubeBlue-L10: #D9D9FF;
  --SuperQubeBlue-L9: #BFBFFF;
  --SuperQubeBlue-L8: #A5A5FF;
  --SuperQubeBlue-L7: #8B8BFF;
  --SuperQubeBlue-L6: #7070FF;
  --SuperQubeBlue-L5: #5555FF;
  --SuperQubeBlue-L4: #3232FF;
  --SuperQubeBlue-L3: #1E1ED7;
  --SuperQubeBlue-L2: #1717A4;
  --SuperQubeBlue-L1: #0F0F6F;
  --SuperQubeBlue-L0: #060642;
  --SuperQubeBlue-L-1: #020227;

  --SuperQubeBlueGray-L10: #ffffff;
  --SuperQubeBlueGray-L9: #d5d5d8;
  --SuperQubeBlueGray-L8: #b4b4ba;
  --SuperQubeBlueGray-L7: #93939c;
  --SuperQubeBlueGray-L6: #757580;
  --SuperQubeBlueGray-L5: #585865;
  --SuperQubeBlueGray-L4: #3c3c4a;
  --SuperQubeBlueGray-L3: #363645;
  --SuperQubeBlueGray-L2: #303040;
  --SuperQubeBlueGray-L1: #2b2b3b;
  --SuperQubeBlueGray-L0: #262636;

  --SuperQubeBlueBlack: #010114;

  --SuperQubeBlueWhite: #ebe9ea;

  --sq-primary: var(--SuperQubeBlue);
  --sq-primary-soft: var(--SuperQubeBlue-L10);
  --sq-primary-strong: var(--SuperQubeBlue-L3);
  --sq-danger: var(--SuperQubeRed-L5);
  --sq-danger-soft: var(--SuperQubeRed-L10);
  --sq-danger-strong: var(--SuperQubeRed-L3);
  --sq-on-dark: #ffffff;
  --sq-on-light: #0F0F0F;
  --sq-green: #00ff9d;
  --SuperQubeGreen-Strong: #00995e;
  --SuperQubeGreen-Mid: #00c94e;
  --SuperQubeGreen-Light: #e5fff5;
}

/* Green Utilities */
.bg-sq-green-strong {
  background-color: var(--SuperQubeGreen-Strong) !important;
}

.text-sq-green-light {
  color: var(--SuperQubeGreen-Light) !important;
}

/* ------------------------------------------------------------------
     2) Background utility classy
     Použití: .bg-sq-blue-5, .bg-sq-red-7 atd.
     Číslo = L* (1 = nejtmavší, 10 = nejsvětlejší)
     ------------------------------------------------------------------ */

/* BLACK background */

.bg-sq-blue-black-1 {
  background-color: var(--SuperQubeBlueBlack) !important;
}

.bg-sq-blue-l-1 {
  background-color: var(--SuperQubeBlue-L-1) !important;
}

.bg-sq-blue-l0 {
  background-color: var(--SuperQubeBlue-L0) !important;
}

/* BLUE background */

.bg-sq-blue {
  background-color: var(--SuperQubeBlue) !important;
}

.bg-sq-blue-1 {
  background-color: var(--SuperQubeBlue-L1) !important;
}

.bg-sq-blue-2 {
  background-color: var(--SuperQubeBlue-L2) !important;
}

.bg-sq-blue-3 {
  background-color: var(--SuperQubeBlue-L3) !important;
}

.bg-sq-blue-4 {
  background-color: var(--SuperQubeBlue-L4) !important;
}

.bg-sq-blue-5 {
  background-color: var(--SuperQubeBlue-L5) !important;
}

.bg-sq-blue-6 {
  background-color: var(--SuperQubeBlue-L6) !important;
}

.bg-sq-blue-7 {
  background-color: var(--SuperQubeBlue-L7) !important;
}

.bg-sq-blue-8 {
  background-color: var(--SuperQubeBlue-L8) !important;
}

.bg-sq-blue-9 {
  background-color: var(--SuperQubeBlue-L9) !important;
}

.bg-sq-blue-10 {
  background-color: var(--SuperQubeBlue-L10) !important;
}

/* RED background */

.bg-sq-red-1 {
  background-color: var(--SuperQubeRed-L1) !important;
}

.bg-sq-red-2 {
  background-color: var(--SuperQubeRed-L2) !important;
}

.bg-sq-red-3 {
  background-color: var(--SuperQubeRed-L3) !important;
}

.bg-sq-red-4 {
  background-color: var(--SuperQubeRed-L4) !important;
}

.bg-sq-red-5 {
  background-color: var(--SuperQubeRed-L5) !important;
}

.bg-sq-red-6 {
  background-color: var(--SuperQubeRed-L6) !important;
}

.bg-sq-red-7 {
  background-color: var(--SuperQubeRed-L7) !important;
}

.bg-sq-red-8 {
  background-color: var(--SuperQubeRed-L8) !important;
}

.bg-sq-red-9 {
  background-color: var(--SuperQubeRed-L9) !important;
}

.bg-sq-red-10 {
  background-color: var(--SuperQubeRed-L10) !important;
}

/* BLUE GRAY background */

.bg-sq-blue-gray-l0 {
  background-color: var(--SuperQubeBlueGray-L0) !important;
}

.bg-sq-blue-white {
  background-color: var(--SuperQubeBlueWhite) !important;
}

/* ------------------------------------------------------------------
     3) Text utility classy
     Použití: .text-sq-blue-3, .text-sq-red-5, ...
     ------------------------------------------------------------------ */

.text-sq-blue {
  color: var(--SuperQubeBlue) !important;
}

.text-sq-blue-1 {
  color: var(--SuperQubeBlue-L1) !important;
}

.text-sq-blue-2 {
  color: var(--SuperQubeBlue-L2) !important;
}

.text-sq-blue-3 {
  color: var(--SuperQubeBlue-L3) !important;
}

.text-sq-blue-4 {
  color: var(--SuperQubeBlue-L4) !important;
}

.text-sq-blue-5 {
  color: var(--SuperQubeBlue-L5) !important;
}

.text-sq-blue-6 {
  color: var(--SuperQubeBlue-L6) !important;
}

.text-sq-blue-7 {
  color: var(--SuperQubeBlue-L7) !important;
}

.text-sq-blue-8 {
  color: var(--SuperQubeBlue-L8) !important;
}

.text-sq-blue-9 {
  color: var(--SuperQubeBlue-L9) !important;
}

.text-sq-blue-10 {
  color: var(--SuperQubeBlue-L10) !important;
}

.text-sq-red-1 {
  color: var(--SuperQubeRed-L1) !important;
}

.text-sq-red-2 {
  color: var(--SuperQubeRed-L2) !important;
}

.text-sq-red-3 {
  color: var(--SuperQubeRed-L3) !important;
}

.text-sq-red-4 {
  color: var(--SuperQubeRed-L4) !important;
}

.text-sq-red-5 {
  color: var(--SuperQubeRed-L5) !important;
}

.text-sq-red-6 {
  color: var(--SuperQubeRed-L6) !important;
}

.text-sq-red-7 {
  color: var(--SuperQubeRed-L7) !important;
}

.text-sq-red-8 {
  color: var(--SuperQubeRed-L8) !important;
}

.text-sq-red-9 {
  color: var(--SuperQubeRed-L9) !important;
}

.text-sq-red-10 {
  color: var(--SuperQubeRed-L10) !important;
}

/* Kontrastní text na světlém/tmavém */

.text-on-sq-dark {
  color: var(--sq-on-dark) !important;
}

.text-on-sq-light {
  color: var(--sq-on-light) !important;
}

/* ------------------------------------------------------------------
     4) Border utility classy
     Použití: .border-sq-blue-5, .border-sq-red-3, ...
     ------------------------------------------------------------------ */

.border-sq-blue {
  border-color: var(--SuperQubeBlue) !important;
}

.border-sq-blue-1 {
  border-color: var(--SuperQubeBlue-L1) !important;
}

.border-sq-blue-2 {
  border-color: var(--SuperQubeBlue-L2) !important;
}

.border-sq-blue-3 {
  border-color: var(--SuperQubeBlue-L3) !important;
}

.border-sq-blue-4 {
  border-color: var(--SuperQubeBlue-L4) !important;
}

.border-sq-blue-5 {
  border-color: var(--SuperQubeBlue-L5) !important;
}

.border-sq-blue-6 {
  border-color: var(--SuperQubeBlue-L6) !important;
}

.border-sq-blue-7 {
  border-color: var(--SuperQubeBlue-L7) !important;
}

.border-sq-blue-8 {
  border-color: var(--SuperQubeBlue-L8) !important;
}

.border-sq-blue-9 {
  border-color: var(--SuperQubeBlue-L9) !important;
}

.border-sq-blue-10 {
  border-color: var(--SuperQubeBlue-L10) !important;
}

.border-sq-red-1 {
  border-color: var(--SuperQubeRed-L1) !important;
}

.border-sq-red-2 {
  border-color: var(--SuperQubeRed-L2) !important;
}

.border-sq-red-3 {
  border-color: var(--SuperQubeRed-L3) !important;
}

.border-sq-red-4 {
  border-color: var(--SuperQubeRed-L4) !important;
}

.border-sq-red-5 {
  border-color: var(--SuperQubeRed-L5) !important;
}

.border-sq-red-6 {
  border-color: var(--SuperQubeRed-L6) !important;
}

.border-sq-red-7 {
  border-color: var(--SuperQubeRed-L7) !important;
}

.border-sq-red-8 {
  border-color: var(--SuperQubeRed-L8) !important;
}

.border-sq-red-9 {
  border-color: var(--SuperQubeRed-L9) !important;
}

.border-sq-red-10 {
  border-color: var(--SuperQubeRed-L10) !important;
}

/* ------------------------------------------------------------------
     5) Shortcut classy pro "brand" prvky
     ------------------------------------------------------------------ */

/* Primární brand pozadí – modrá */

.bg-sq-primary {
  background-color: var(--sq-primary) !important;
  color: var(--sq-on-dark) !important;
}

.bg-sq-primary-soft {
  background-color: var(--sq-primary-soft) !important;
  color: var(--sq-on-light) !important;
}

/* Danger / error */

.bg-sq-danger {
  background-color: var(--sq-danger) !important;
  color: var(--sq-on-dark) !important;
}

.bg-sq-danger-soft {
  background-color: var(--sq-danger-soft) !important;
  color: var(--sq-on-light) !important;
}

/* Button styly – použij s .btn (např. class="btn btn-sq-primary") */

.btn-sq-primary {
  color: var(--sq-on-dark) !important;
  background-color: var(--sq-primary) !important;
  border-color: var(--sq-primary-strong) !important;
  border-radius: 980px !important;
}

.btn-sq-primary:hover,
.btn-sq-primary:focus {
  background-color: var(--sq-primary-strong) !important;
  border-color: var(--sq-primary-strong) !important;
}

/* Golden Ratio Scaling */
.btn-golden-ratio {
  font-size: 1.618rem !important;
  padding: 0.81rem 2.43rem !important;
  /* Scale base px-4 (1.5rem) and py-2 (0.5rem) by 1.618 */
  border-radius: 980px !important;
  /* Ensure pill shape persists */
}

@media (max-width: 767px) {
  .btn-golden-ratio {
    font-size: 1.21rem !important;
    padding: 0.6rem 1.82rem !important;
  }
}

.btn-sq-ghost {
  color: var(--sq-primary-strong) !important;
  background-color: transparent !important;
  border: 2px solid var(--sq-primary-strong) !important;
}

.btn-sq-ghost:hover,
.btn-sq-ghost:focus {
  background-color: var(--sq-primary-soft) !important;
}

/* Badge / label */

.badge-sq {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background-color: var(--sq-primary-soft);
  color: var(--sq-primary-strong);
}

/* Karty s brand borderem */

.card-sq-primary {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--sq-primary) !important;
}

/* Outline / focus ring */

.outline-sq-primary {
  outline: 2px solid var(--sq-primary) !important;
  outline-offset: 2px;
}

/* Blue CTA Button - Custom L10/L5 hover with L3 text */
.btn-sq-blue-cta {
  color: var(--SuperQubeBlue-L3) !important;
  background-color: var(--SuperQubeBlue-L10) !important;
  border: none !important;
  border-radius: 980px !important;
}

.btn-sq-blue-cta .button-arrow {
  /* Force black first, then target Blue L3 (#1E1ED7) */
  filter: brightness(0) saturate(100%) invert(12%) sepia(99%) saturate(5940%) hue-rotate(239deg) brightness(88%) contrast(106%) !important;
}

.btn-sq-blue-cta:hover,
.btn-sq-blue-cta:focus {
  background-color: var(--SuperQubeBlue-L2) !important;
  color: var(--SuperQubeBlue-L10) !important;
  border: none !important;
}

.btn-sq-blue-cta:hover .button-arrow,
.btn-sq-blue-cta:focus .button-arrow {
  /* Targeted Blue L10 (#D9D9FF) - simple invert(1) for white-ish result often works, but let's be precise */
  filter: brightness(0) saturate(100%) invert(94%) sepia(50%) saturate(666%) hue-rotate(188deg) brightness(103%) contrast(104%) !important;
}

/* Overlays */
.bg-sq-blue-overlay-20 {
  background-color: rgba(6, 6, 66, 0.2);
  /* SuperQubeBlue-L0 with 20% opacity */
}

/* Hover Utils */
.hover-scale-sm {
  transition: transform 0.3s ease;
}

.hover-scale-sm:hover {
  transform: scale(1.02);
}