/* ==================================================
   Utility Classes - App Branding Color System
   Pure utility classes for colors, spacing, layout
   NOTE: Component styles moved to /css/components/
   ================================================== */

/* ==================================================
   Text Color Utilities
   ================================================== */
.text-primary {
  color: var(--app-text-primary);
}

.text-secondary {
  color: var(--app-text-secondary);
}

.text-tertiary {
  color: var(--app-text-tertiary);
}

.text-accent-blue {
  color: var(--app-accent-blue);
}

.text-accent-magenta {
  color: var(--app-accent-magenta);
}

.text-accent-green {
  color: var(--app-accent-green);
}

.text-accent-red {
  color: var(--app-accent-red);
}

.text-accent-yellow {
  color: var(--app-accent-yellow);
}

.text-accent-orange {
  color: var(--app-accent-orange);
}

.text-accent-teal {
  color: var(--app-accent-teal);
}

.text-muted {
  color: var(--app-text-tertiary);
}

/* ==================================================
   Background Color Utilities
   ================================================== */
.bg-primary {
  background-color: var(--app-bg-primary);
}

.bg-surface {
  background-color: var(--app-bg-surface);
}

.bg-elevated {
  background-color: var(--app-bg-elevated);
}

.bg-success {
  background-color: var(--app-success-bg);
}

.bg-warning {
  background-color: var(--app-warning-bg);
}

.bg-error {
  background-color: var(--app-error-bg);
}

.bg-info {
  background-color: var(--app-info-bg);
}

.bg-accent-blue {
  background-color: var(--app-accent-blue);
}

/* Background with Transparency */
.bg-blue-subtle {
  background: rgba(74, 159, 216, 0.05);
}

.bg-blue-light {
  background: rgba(74, 159, 216, 0.1);
}

.bg-blue-medium {
  background: rgba(74, 159, 216, 0.15);
}

.bg-green-subtle {
  background: rgba(107, 192, 112, 0.05);
}

.bg-green-light {
  background: rgba(107, 192, 112, 0.1);
}

.bg-red-subtle {
  background: rgba(231, 111, 111, 0.05);
}

.bg-red-light {
  background: rgba(231, 111, 111, 0.1);
}

.bg-yellow-subtle {
  background: rgba(244, 197, 66, 0.05);
}

.bg-yellow-light {
  background: rgba(244, 197, 66, 0.1);
}

.bg-onboarding-hover {
  background-color: rgba(138, 180, 207, 0.02);
}

.bg-onboarding-hover-active {
  background-color: rgba(138, 180, 207, 0.05);
}

.bg-onboarding-completed {
  background-color: transparent;
}

.bg-onboarding-completed-hover {
  background-color: rgba(138, 180, 207, 0.02);
}

/* ==================================================
   Gradient Background Utilities
   ================================================== */
.bg-gradient-sybil {
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
}

.sybil-gradient-bg {
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
}

/* ==================================================
   Border Color Utilities
   ================================================== */
.border-subtle {
  border-color: var(--app-border-subtle);
}

.border-default {
  border-color: var(--app-border-default);
}

.border-emphasis {
  border-color: var(--app-border-emphasis);
}

.border-accent-blue {
  border-color: var(--app-accent-blue);
}

.border-accent-green {
  border-color: var(--app-accent-green);
}

.border-accent-red {
  border-color: var(--app-accent-red);
}

.border-t-subtle {
  border-top: 1px solid var(--app-border-subtle);
}

.border-b-subtle {
  border-bottom: 1px solid var(--app-border-subtle);
}

.border-l-subtle {
  border-left: 1px solid var(--app-border-subtle);
}

.border-r-subtle {
  border-right: 1px solid var(--app-border-subtle);
}

.divider-subtle {
  border-color: var(--app-border-subtle);
}

.divider-default {
  border-color: var(--app-border-default);
}

.divider-horizontal {
  border-top: 1px solid var(--app-border-subtle);
}

.divider-or {
  border-top: 1px solid var(--app-border-subtle);
}

.border-split-left {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

/* ==================================================
   Fill Color Utilities (for SVG/icons)
   ================================================== */
.fill-primary {
  fill: var(--app-text-primary);
}

.fill-secondary {
  fill: var(--app-text-secondary);
}

.fill-tertiary {
  fill: var(--app-text-tertiary);
}

.fill-accent-blue {
  fill: var(--app-accent-blue);
}

.fill-accent-green {
  fill: var(--app-accent-green);
}

/* ==================================================
   Icon Utilities
   ================================================== */
.icon-tertiary {
  color: var(--app-text-tertiary);
}

.icon-secondary {
  color: var(--app-text-secondary);
}

.icon-primary {
  color: var(--app-text-primary);
}

.icon-locked {
  color: var(--app-text-tertiary);
}

.icon-tertiary-sm {
  color: var(--app-text-tertiary);
}

.placeholder-icon {
  color: var(--app-text-tertiary);
  background-color: var(--app-bg-elevated);
}

.icon-container-elevated {
  background: var(--app-bg-elevated);
}

.icon-container-success {
  background: var(--app-success-bg);
}

/* ==================================================
   Hover State Utilities
   ================================================== */
.hover-accent-blue:hover {
  color: var(--app-accent-blue);
}

.hover-bg-blue:hover {
  background-color: rgba(74, 159, 216, 0.1);
}

.genome-profile-hover {
  background-color: rgba(74, 159, 216, 0.05);
}

.onboarding-card-hover {
  background-color: rgba(138, 180, 207, 0.02);
  transition: background-color 0.2s ease;
}

.onboarding-card-hover:hover {
  background-color: rgba(138, 180, 207, 0.05);
}

.dropdown-item-hover {
  color: var(--app-text-primary);
}

.dropdown-item-hover:hover {
  background: var(--app-bg-elevated);
}

/* ==================================================
   Spacing Utilities
   ================================================== */
.gap-xs {
  gap: 4px;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 12px;
}

.gap-lg {
  gap: 16px;
}

.gap-xl {
  gap: 24px;
}

.p-16 {
  padding: 16px;
}

/* ==================================================
   Border Radius Utilities
   ================================================== */
.radius-xs {
  border-radius: 2px;
}

.radius-sm {
  border-radius: 4px;
}

.radius-md {
  border-radius: 6px;
}

.radius-lg {
  border-radius: 8px;
}

.radius-xl {
  border-radius: 12px;
}

.radius-full {
  border-radius: 9999px;
}

/* ==================================================
   Opacity Utilities
   ================================================== */
.disabled-opacity {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================================================
   Transition Utilities
   ================================================== */
.transition-colors {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.transition-all {
  transition: all 0.2s ease;
}

.transition-shadow {
  transition: box-shadow 0.2s ease;
}

/* ==================================================
   Typography Utilities
   ================================================== */
.heading-primary {
  color: var(--app-text-primary);
  font-weight: 600;
}

.heading-secondary {
  color: var(--app-text-secondary);
  font-weight: 600;
}

.auth-heading {
  color: var(--app-text-primary);
}

.auth-subheading {
  color: var(--app-text-tertiary);
}

.empty-state-text {
  color: var(--app-text-secondary);
}

.card-header-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--app-text-primary);
}

/* ==================================================
   Link Utilities
   ================================================== */
.link-primary {
  color: var(--app-accent-blue);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.link-primary:hover {
  opacity: 0.8;
}

.link-primary:active {
  opacity: 0.6;
}

.link-blue {
  color: var(--app-accent-blue);
}

.link-secondary-text {
  color: var(--app-text-secondary);
}

.link-sm {
  font-size: 0.875rem;
  color: var(--app-accent-blue);
  text-decoration: none;
}

.link-sm:hover {
  opacity: 0.8;
}

/* ==================================================
   Flex Layout Utilities
   ================================================== */
.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center-gap-16 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.flex-center-gap-8 {
  display: flex;
  gap: 8px;
}

/* ==================================================
   Width Utilities
   ================================================== */
.w-3\/4 {
  width: 75%;
}

.w-1\/2 {
  width: 50%;
}

.w-2\/3 {
  width: 66.666667%;
}

/* ==================================================
   Positioning Utilities
   ================================================== */
.dropdown-positioned {
  position: absolute;
  right: 0;
  margin-top: 8px;
  z-index: 50;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ==================================================
   Status Indicator Utilities
   ================================================== */
.status-dot-green {
  background: var(--app-accent-green);
}

.sybil-status-active {
  background: var(--app-accent-green);
}

.sybil-status-thinking {
  background: var(--app-accent-yellow);
}

/* ==================================================
   Animation Utilities
   ================================================== */
.animation-delay-100 {
  animation-delay: 0.1s;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.progress-bar-start {
  width: 0%;
}

.progress-width-dynamic {
  transition: width 0.5s ease;
}

/* ==================================================
   Sybil-specific Layout Utilities
   ================================================== */
.sybil-drawer-height {
  height: 25vh;
}

.sybil-drawer-messages-height {
  height: calc(25vh - 120px);
}

.sybil-desk-artifacts-height {
  flex: 0 0 60%;
}

.sybil-desk-drawer-height {
  flex: 0 0 40%;
}

.sybil-drawer-visible {
  transform: translateY(0);
}

.sybil-drawer-hidden {
  transform: translateY(100%);
}

.sybil-typing-dot {
  background: var(--app-text-tertiary);
}

.sybil-message-bg {
  background: var(--app-bg-elevated);
  border-radius: var(--radius-md);
}

.sybil-user-message-bg {
  background: var(--app-accent-blue);
  border-radius: var(--radius-md);
}

/* ==================================================
   Navigation-specific Utilities
   ================================================== */
.nav-section-divider {
  border-top: 1px solid var(--app-border-subtle);
}

.nav-section-title {
  color: var(--app-text-tertiary);
}

.profile-section-border {
  border-top: 1px solid var(--app-border-subtle);
}

/* ==================================================
   Selection Utilities
   ================================================== */
.selection-primary::selection {
  background-color: var(--app-accent-blue);
  color: var(--app-bg-primary);
}

/* ==================================================
   Skeleton/Loading Utilities
   ================================================== */
.skeleton-bg {
  background: var(--app-bg-elevated);
}

/* ==================================================
   Divider Text Background
   ================================================== */
.divider-text-bg {
  background: var(--app-bg-primary);
  color: var(--app-text-tertiary);
}

/* ==================================================
   Skip Link Focus
   ================================================== */
.skip-link-focus {
  background: var(--app-accent-blue);
}

/* ==================================================
   Dashboard Layout Utilities
   ================================================== */
/* Sidebar cards minimum height - matches main content */
.sidebar-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.sidebar-card > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ==================================================
   Responsive Utilities
   ================================================== */
@media (max-width: 640px) {
  .sm\:text-primary {
    color: var(--app-text-primary);
  }

  .sm\:text-secondary {
    color: var(--app-text-secondary);
  }

  .sm\:text-tertiary {
    color: var(--app-text-tertiary);
  }
}

/* ==================================================
   Sybil Icon Color Filters for img tags
   ================================================== */
/* Since currentColor doesn't work with <img> tags,
   we use CSS filters to recolor black SVGs to brand colors */

/* Default: match other nav icons (light grayish-blue) */
img[src*="sybil.svg"] {
  filter: invert(0.6) brightness(1.1);
  opacity: 0.7;
}

/* Magenta color filter when explicitly requested */
img[src*="sybil.svg"].text-app-accent-magenta {
  filter: invert(0.2) sepia(1) saturate(1.5) hue-rotate(290deg) brightness(1.1);
  opacity: 1;
}

/* White color filter for sybil icons in dark backgrounds (desk mode header) */
img[src*="sybil.svg"].text-white {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* White color filter for pyramid icons in accent buttons */
img[src*="pyramid-icon-mono.svg"] {
  filter: brightness(0) invert(1);
  opacity: 1;
}