@import 'tailwindcss' theme(static);
@import '@nuxt/ui';

@theme static {
  /* Primary color - Teal (matching landing page) */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;

  /* Cyan for accent highlights */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;

  /* Violet color palette (for Tailwind classes and hover effects) */
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;
}

/* ============================================
   FOCUS & ACCESSIBILITY
   ============================================ */

/* Global focus styles for elements without built-in focus styling.
   Nuxt UI components (inputs, buttons, selects, etc.) have their own
   focus ring styling, so we exclude them to avoid double borders. */
:focus-visible:not(input):not(textarea):not(select):not(button):not([role="combobox"]):not([role="listbox"]):not([role="option"]):not([role="checkbox"]):not([role="radio"]):not([role="switch"]):not([role="slider"]):not([role="tab"]):not([role="menuitem"]) {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
}

/* ============================================
   HEADER STYLING
   ============================================ */

/* Header logo accent with gradient */
.header-logo-accent {
  background: linear-gradient(135deg, var(--color-teal-500), var(--color-cyan-400));
  box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.2);
}

/* ============================================
   NAVIGATION BUTTON GROUP
   ============================================ */

.nav-button-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 640px) {
  .nav-button-group {
    flex-direction: column;
    width: 100%;
  }
  .nav-button-group > * {
    width: 100%;
    justify-content: center;
  }
}

/* Navigation separator line */
.nav-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
  margin-bottom: 1.5rem;
}

.dark .nav-separator {
  background: linear-gradient(90deg, transparent, var(--color-gray-700), transparent);
}