/* Talas — custom styles beyond Tailwind */

:root {
  --color-brand: #3d3954;

  /* Talas gradient stops — update here to change everywhere */
  --tg-1: #f6cf8c;
  --tg-2: #f5ded1;
  --tg-3: #e6d8ec;
  --tg-4: #d2cef4;
  --tg-5: #afafdb;
}

/* Full-opacity diagonal gradient — for backgrounds, panels */
.bg-talas-gradient {
  background: linear-gradient(135deg, var(--tg-1), var(--tg-2), var(--tg-3), var(--tg-4), var(--tg-5));
}

/* 50% alpha diagonal gradient — for pills */
.bg-talas-gradient-soft {
  background: linear-gradient(135deg, #f6cf8c80, #f5ded180, #e6d8ec80, #d2cef480, #afafdb80);
}

/* Horizontal gradient clipped to text, darkened for legibility on white */
.text-talas-gradient {
  background: linear-gradient(to right, var(--tg-1), var(--tg-2), var(--tg-3), var(--tg-4), var(--tg-5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: brightness(0.65);
}

/* Divider and panel border color */
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: #d2cef4 !important;
}

a {
  color: #4646a3;
  font-weight: 700;
}

/* Carousel button hover */
.workflow-btn:hover {
  color: #afafdb !important;
}

/* Narrative wipe-in animation */
@keyframes wipeIn {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
  }
}

.narrative-wipe {
  animation: wipeIn 0.7s ease-out forwards;
}

/* Nav breakpoint at 900px — ID-based, no Tailwind dependency */
#nav-full-logo   { display: none; }
#nav-mobile-logo { display: block; }
#nav-desktop     { display: none; }
#menu-toggle     { display: flex; }

@media (min-width: 900px) {
  #nav-full-logo   { display: block; }
  #nav-mobile-logo { display: none; }
  #nav-desktop     { display: flex; }
  #menu-toggle     { display: none; }
}