/* ==========================================================
   Visual Identity Page — CSS
   Matches: NCIM-External/dist/visual-identity.html
   ========================================================== */

/* ---- CSS Custom Properties (color tokens) ---- */
:root {
  --bs-purple-900-rgb: 22, 3, 65;
  --bs-purple-600-rgb: 104, 96, 193;
  --bs-purple-200-rgb: 175, 154, 255;
  --bs-purple-100-rgb: 180, 193, 255;
  --bs-teal-600-rgb: 15, 158, 169;
  --bs-teal-200-rgb: 138, 228, 233;
  --bs-neutral-rgb: 249, 250, 251;
  --bs-neutral-25-rgb: 252, 252, 253;
  --bs-background-success-rgb: 6, 118, 71;
}

/* ---- Background Colors ---- */
.bg-purple-900 {
  background-color: rgba(var(--bs-purple-900-rgb), 1) !important;
}
.bg-purple-600 {
  background-color: rgba(var(--bs-purple-600-rgb), 1) !important;
}
.bg-purple-200 {
  background-color: rgba(var(--bs-purple-200-rgb), 1) !important;
}
.bg-purple-100 {
  background-color: rgba(var(--bs-purple-100-rgb), 1) !important;
}
.bg-teal-600 {
  background-color: rgba(var(--bs-teal-600-rgb), 1) !important;
}
.bg-teal-200 {
  background-color: rgba(var(--bs-teal-200-rgb), 1) !important;
}
.bg-neutral {
  background-color: rgba(var(--bs-neutral-rgb), 1) !important;
}
.bg-neutral-25 {
  background-color: rgba(var(--bs-neutral-25-rgb), 1) !important;
}
.bg-background-success {
  background-color: rgba(var(--bs-background-success-rgb), 1) !important;
}
.bg-lavendar-mist {
  background-color: #f7f6ff !important;
}

/* ---- Text Colors ---- */
.text-purple-900 {
  color: #160341 !important;
}
.text-purple-600 {
  color: #6860c1 !important;
}
.text-purple-200 {
  color: #af9aff !important;
}
.text-purple-100 {
  color: #b4c1ff !important;
}
.text-teal-600 {
  color: #0f9ea9 !important;
}
.text-teal-200 {
  color: #8ae4e9 !important;
}

/* ---- Vision Background (Identity Guide Card) ---- */
.vision-background {
  background: url("../../../../themes/custom/ncim_theme/images/bgs/vision-pattern.svg"),
    linear-gradient(135.32deg, #3a3669 0.01%, #5b54aa 49.74%, #0e9ca7 99.46%);
  background-position: left bottom -30px, 0 0;
  background-repeat: no-repeat, no-repeat;
  min-height: 480px;
}

/* ---- Logo Variation Cards ---- */
.logo-themes {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 265px;
}
.logo-themes:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.logo-themes .logo-img {
  height: 73px;
  width: auto;
  max-width: 100%;
}

/* ---- Download Button with Arrow ---- */
.btn-with-arrow .arrow-icon {
  filter: brightness(0);
  transition: filter 0.3s ease;
}
.btn-with-arrow:hover .arrow-icon {
  filter: brightness(1);
}

/* ---- Palette Section ---- */
.palette-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.palette-primary,
.palette-secondary {
  display: flex;
  flex-direction: column;
}
.palette-title {
  color: #1f2a37;
}

/* ---- Typography helpers ---- */
.font-inter {
  font-family: "Inter", sans-serif;
}
.font-cairo {
  font-family: "Cairo", sans-serif;
}
.letter-spacing-1 {
  letter-spacing: 1px;
}

/* ---- Logo Section Card ---- */
.vi-logo-card {
  background-color: #f7f6ff;
}

/* ---- Btn Outline Default ---- */
.btn-outline-default {
  color: #1f2a37;
  border-color: #1f2a37;
  background-color: transparent;
}
.btn-outline-default:hover {
  background-color: #1f2a37;
  color: #fff;
}


/* ---- Responsive: 2-col logo grid ---- */
@media (max-width: 767px) {
  .logo-themes {
    min-height: 200px;
  }
  .vision-background {
    min-height: 380px;
  }
}