:root {
  --color-primary: #00bcd4;
  --color-secondary: #4dd0e1;
  --color-accent: #80deea;
  --color-dark: #ff5722;
  --color-darker: #d84315;
  --color-light: #fff3e0;
  --color-bg-white: #ffffff;
  --color-text: #34495e;
  --color-text-strong: #d84315;
  --color-text-light: #7f8c8d;
  --color-border: rgba(0, 188, 212, 0.2);
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Lato', sans-serif;
  --shadow-sm: 0 2px 8px rgba(0, 188, 212, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 188, 212, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 188, 212, 0.25);
  --radius: 12px;
  --transition: all 0.3s ease;
}

/* Header logo hover consistency */
.logo-section:hover,
.logo-section:focus-visible { text-decoration: none; }

.logo-swap { position: relative; width: 60px; height: 60px; display: inline-block; flex: 0 0 60px; }
.logo-swap .logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform-origin: center center;
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.logo-swap .logo-img-default { opacity: 1; transform: scale(1); }
.logo-swap .logo-img-hover { opacity: 0; transform: scale(0.55); }
.logo-section:hover .logo-swap .logo-img-default,
.logo-section:focus-visible .logo-swap .logo-img-default { opacity: 0; transform: scale(0.88); }
.logo-section:hover .logo-swap .logo-img-hover,
.logo-section:focus-visible .logo-swap .logo-img-hover { opacity: 1; transform: scale(1); }
@media (max-width: 480px) {
  .logo-swap { width: 50px; height: 50px; flex-basis: 50px; }
}