/* Coachino Design System - Site Styles */

:root {
  /* Coachino Design System */
  --background: #F5F7FA;
  --foreground: #0D2B3A;
  --card: #FFFFFF;
  --card-foreground: #0D2B3A;
  --popover: #FFFFFF;
  --popover-foreground: #0D2B3A;
  --primary: #0F6FB2;
  --primary-foreground: #FFFFFF;
  --primary-light: #2A8ED6;
  --secondary: #E8F4FC;
  --secondary-foreground: #0F6FB2;
  --muted: #EEF2F6;
  --muted-foreground: #5A7A8A;
  --accent: #1CC1D4;
  --accent-foreground: #FFFFFF;
  --green: #5AC42A;
  --green-light: #7BE14C;
  --green-foreground: #FFFFFF;
  --teal: #1CC1D4;
  --destructive: #D93025;
  --destructive-foreground: #FFFFFF;
  --border: #D6E4EE;
  --input: #D6E4EE;
  --ring: #0F6FB2;
  --radius: 0.5rem;
  --surface: #FFFFFF;
  /* Sidebar tokens */
  --sidebar: #0D2B3A;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #0F6FB2;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #1a3f52;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #1a3f52;
  --sidebar-ring: #0F6FB2;
}

/* Base Styles */
* {
  outline-color: rgba(15, 111, 178, 0.5);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Tailwind-like Utility Classes */
.text-balance {
  text-wrap: balance;
}

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

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

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

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

/* Section background colors */
.bg-light-blue {
  background-color: #E8F4FC;
}

.bg-off-white {
  background-color: #F5F7FA;
}

.bg-dark-navy {
  background-color: #0D2B3A;
}

.bg-foreground {
  background-color: #0D2B3A;
}

.bg-primary-blue {
  background-color: #0F6FB2;
}

/* Green utility variants */
.bg-green-50 { background-color: rgba(90, 196, 42, 0.08); }
.bg-green-100 { background-color: rgba(90, 196, 42, 0.15); }
.bg-green-500\/15 { background-color: rgba(90, 196, 42, 0.15); }
.text-green-600 { color: #3fa01c; }
.text-green-500 { color: var(--green); }
.border-green-100 { border-color: rgba(90, 196, 42, 0.2); }

/* Teal utility variants */
.bg-teal-500\/10 { background-color: rgba(28, 193, 212, 0.1); }
.text-teal-600 { color: var(--teal); }

/* Red/destructive utility variants */
.bg-red-50 { background-color: rgba(217, 48, 37, 0.05); }
.bg-red-100 { background-color: rgba(217, 48, 37, 0.12); }
.text-red-600 { color: var(--destructive); }
.border-red-100 { border-color: rgba(217, 48, 37, 0.15); }

/* Green-500 for icon backgrounds */
.bg-green-500 { background-color: var(--green); }

/* Text white */
.text-white { color: #ffffff; }

/* Opacity-modified utility classes */
.bg-primary\/10 { background-color: rgba(15, 111, 178, 0.1); }
.bg-primary\/15 { background-color: rgba(15, 111, 178, 0.15); }
.bg-primary\/20 { background-color: rgba(15, 111, 178, 0.2); }
.bg-primary\/5 { background-color: rgba(15, 111, 178, 0.05); }
.bg-primary\/90 { background-color: rgba(15, 111, 178, 0.9); }
.border-primary\/25 { border-color: rgba(15, 111, 178, 0.25); }
.hover\:bg-secondary:hover { background-color: #E8F4FC; }
.hover\:bg-primary\/10:hover { background-color: rgba(15, 111, 178, 0.1); }
.hover\:bg-destructive\/10:hover { background-color: rgba(220, 38, 38, 0.1); }
.border-primary\/15 { border-color: rgba(15, 111, 178, 0.15); }
.border-primary\/20 { border-color: rgba(15, 111, 178, 0.2); }
.border-primary\/30 { border-color: rgba(15, 111, 178, 0.3); }
.bg-muted\/50 { background-color: rgba(238, 242, 246, 0.5); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/60 { background-color: rgba(255, 255, 255, 0.6); }

/* Gradient stop utilities for insights suggestion card */
.from-surface {
  --tw-gradient-from: #FFFFFF;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-primary\/5 {
  --tw-gradient-to: rgba(15, 111, 178, 0.05);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.text-primary-foreground\/60 { color: rgba(255, 255, 255, 0.6); }
.text-primary-foreground\/80 { color: rgba(255, 255, 255, 0.8); }
.border-primary-foreground\/20 { border-color: rgba(255, 255, 255, 0.2); }
.bg-primary-foreground\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-primary-foreground\/90 { background-color: rgba(255, 255, 255, 0.9); }
.hover\:bg-primary-foreground\/90:hover { background-color: rgba(255, 255, 255, 0.9); }
.border-border\/40 { border-color: rgba(214, 228, 238, 0.4); }
.bg-green\/20 { background-color: rgba(90, 196, 42, 0.2); }
.bg-teal\/20 { background-color: rgba(28, 193, 212, 0.2); }
.hover\:bg-primary\/20:hover { background-color: rgba(15, 111, 178, 0.2); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }

/* bg-surface utility */
.bg-surface { background-color: var(--surface); }
.bg-surface\/80 { background-color: rgba(255, 255, 255, 0.8); }

/* Sidebar utility classes */
.bg-sidebar { background-color: var(--sidebar); }
.bg-sidebar-primary { background-color: var(--sidebar-primary); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.border-sidebar-border { border-color: var(--sidebar-border); }
.bg-sidebar-primary\/30 { background-color: rgba(15, 111, 178, 0.3); }
.border-sidebar-primary\/50 { border-color: rgba(15, 111, 178, 0.5); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.focus-visible\:ring-sidebar-ring:focus-visible { --tw-ring-color: var(--sidebar-ring); }

/* Grid utilities missing from generated CSS */
@media (min-width: 768px) {
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
}

/* Spacing utilities missing from generated CSS */
.mt-10 { margin-top: 2.5rem; }
.w-52 { width: 13rem; }
.w-60 { width: 15rem; }
.h-7 { height: 1.75rem; }
.w-7 { width: 1.75rem; }

/* Layout utilities for sidebar */
.overflow-x-hidden { overflow-x: hidden; }
.-translate-x-full { transform: translateX(-100%); }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }

@media (min-width: 768px) {
  .md\:relative { position: relative; }
  .md\:translate-x-0 { transform: translateX(0px); }
}

@media (min-width: 640px) {
  .sm\:inline { display: inline; }
  .sm\:p-6 { padding: 1.5rem; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', system-ui, sans-serif;
}

p, span, div {
  font-family: 'Inter', system-ui, sans-serif;
}

.font-nunito {
  font-family: 'Nunito', system-ui, sans-serif;
}


/* Subtle floating animation for hero elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Gentle pulse for buttons */
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 111, 178, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(15, 111, 178, 0); }
}

.animate-gentle-pulse {
  animation: gentle-pulse 2.5s ease-in-out infinite;
}

/* Card hover lift effect */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(13, 43, 58, 0.15);
}

/* Sparkle animation for decorative elements */
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.animate-sparkle {
  animation: sparkle 3s ease-in-out infinite;
}

/* Form validation error styling (used by jQuery Validation) */
.form-error,
.field-validation-error {
    color: var(--destructive);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: var(--destructive);
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary-errors ul li {
    color: var(--destructive);
    font-size: 0.875rem;
}

/* Accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}