/* Family Ready Coach - Custom CSS */
/* Based on Style Board Palette A */

:root {
  /* Color System - Palette A */
  --primary-teal: #1AA6A6;
  --text-navy: #0D2B45;
  --background-sand: #F4E9D8;
  --accent-lime: #8BC34A;
  --white: #FFFFFF;
  --ink: #10212F;
  --cloud: #F7F5F1;
  --steel: #8896A5;
  --divider: #E6E1D9;
  
  /* Typography Scale */
  --h1-size: 2.25rem; /* 36px */
  --h1-line: 2.75rem; /* 44px */
  --h2-size: 1.75rem; /* 28px */
  --h2-line: 2.25rem; /* 36px */
  --h3-size: 1.375rem; /* 22px */
  --h3-line: 1.875rem; /* 30px */
  --body-size: 1rem; /* 16px */
  --body-line: 1.5rem; /* 24px */
  --small-size: 0.875rem; /* 14px */
  --small-line: 1.375rem; /* 22px */
  
  /* Shape Language */
  --corner-radius: 12px;
  --corner-radius-large: 20px;
  --shadow-level-1: 0 2px 6px rgba(13, 43, 69, 0.09);
  --shadow-level-2: 0 8px 24px rgba(13, 43, 69, 0.12);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid #2C8182;
  outline-offset: 2px;
}

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

/* Custom button styles */
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

.btn-outline {
  @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

.btn-accent {
  @apply bg-accent text-white px-6 py-3 rounded-lg font-medium hover:bg-accent/90 transition-colors focus:ring-2 focus:ring-accent focus:ring-offset-2;
}

/* Form styles */
.form-input {
  @apply w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100;
}

.form-textarea {
  @apply w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 resize-vertical;
}

/* Card styles */
.card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-700 p-6;
}

.card-hover {
  @apply card hover:shadow-xl transition-shadow duration-300;
}

/* Typography */
.text-balance {
  text-wrap: balance;
}

/* Loading states */
.loading {
  @apply animate-pulse;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    color: black !important;
    background: white !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bg-primary {
    background-color: #000 !important;
  }
  
  .text-primary {
    color: #000 !important;
  }
  
  .border-primary {
    border-color: #000 !important;
  }
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Dark mode transitions */
.dark-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}