/* Logo CSS Variables and Infrastructure */
:root {
  /* Logo Configuration - Easy to replace */
  --logo-primary-color: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --logo-primary-text: #F59E0B;
  --logo-secondary-text: #D97706;
  --logo-size-small: 32px;   /* 8x8 */
  --logo-size-medium: 48px;  /* 12x12 */
  --logo-size-large: 64px;   /* 16x16 */

  /* Logo assets paths - Set these when ready to replace */
  --logo-image-url: none; /* Future: url('/assets/logo.png') */
  --logo-icon-url: none;  /* Future: url('/assets/logo-icon.png') */
  --logo-favicon-url: none; /* Future: url('/assets/favicon.ico') */

  /* Animation settings */
  --logo-animation-duration: 0.3s;
  --logo-animation-easing: ease-in-out;
}

/* Logo Components */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform var(--logo-animation-duration) var(--logo-animation-easing);
}

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

/* Logo Icon (replaceable) */
.logo-icon {
  width: var(--logo-size-medium);
  height: var(--logo-size-medium);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--logo-primary-color);
  transition: all var(--logo-animation-duration) var(--logo-animation-easing);
}

.logo-icon--small {
  width: var(--logo-size-small);
  height: var(--logo-size-small);
}

.logo-icon--large {
  width: var(--logo-size-large);
  height: var(--logo-size-large);
}

/* When logo image is available, hide SVG and show image */
.logo-icon.has-image {
  background: none;
  padding: 0;
}

.logo-icon.has-image svg {
  display: none;
}

.logo-icon.has-image::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: var(--logo-image-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

/* Logo Text */
.logo-text {
  font-size: 1.25rem;
  font-weight: bold;
  background: linear-gradient(135deg, var(--logo-primary-text), var(--logo-secondary-text));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all var(--logo-animation-duration) var(--logo-animation-easing);
}

.logo-text--large {
  font-size: 1.5rem;
}

.logo-text--small {
  font-size: 1rem;
}

/* Loading Logo (for loading screens) */
.loading-logo {
  width: var(--logo-size-medium);
  height: var(--logo-size-medium);
  background: var(--logo-primary-color);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  animation: logoPluse 2s ease-in-out infinite;
}

.loading-logo.has-image {
  background: none;
}

.loading-logo.has-image::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: var(--logo-image-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.loading-logo.has-image svg {
  display: none;
}

/* Logo animations */
@keyframes logoPluse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Responsive logo sizing */
@media (max-width: 640px) {
  .logo-text {
    font-size: 1.125rem;
  }

  .logo-icon {
    width: var(--logo-size-small);
    height: var(--logo-size-small);
  }
}

/* Future logo replacement instructions:

   To replace the current SVG logo with a custom image:

   1. Add your logo files to /frontend/public/assets/
      - logo.png (main logo)
      - logo-icon.png (icon only)
      - favicon.ico (browser icon)

   2. Update CSS variables:
      --logo-image-url: url('/assets/logo.png');
      --logo-icon-url: url('/assets/logo-icon.png');
      --logo-favicon-url: url('/assets/favicon.ico');

   3. Add the 'has-image' class to logo containers:
      <div class="logo-icon has-image">

   4. Update favicon in HTML:
      <link rel="icon" href="/assets/favicon.ico">

   The SVG will automatically be hidden and replaced with the image.
*/