/* Sweet Sound Speech Brand Colors & Typography */
/* Based on logo colors: #00407B (navy) and #E31080 (pink) */
/* Fonts: Inter (primary) + Fredoka (accent) */

:root {
  /* Primary Brand Colors */
  --brand-navy: #00407B;
  --brand-pink: #E31080;
  --brand-white: #FFFFFF;
  
  /* Navy Variations */
  --navy-50: #F0F4F8;
  --navy-100: #D9E2EC;
  --navy-200: #BCCCDC;
  --navy-300: #9FB3C8;
  --navy-400: #829AB1;
  --navy-500: #627D98;
  --navy-600: #486581;
  --navy-700: #334E68;
  --navy-800: #243B53;
  --navy-900: #102A43;
  
  /* Pink Variations */
  --pink-50: #FDF2F8;
  --pink-100: #FCE7F3;
  --pink-200: #FBCFE8;
  --pink-300: #F9A8D4;
  --pink-400: #F472B6;
  --pink-500: #EC4899;
  --pink-600: #DB2777;
  --pink-700: #BE185D;
  --pink-800: #9D174D;
  --pink-900: #831843;
  
  /* Neutral Grays (warm undertones to complement navy) */
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
}

/* Brand Color Utility Classes */
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-brand-pink { background-color: var(--brand-pink); }
.text-brand-navy { color: var(--brand-navy); }
.text-brand-pink { color: var(--brand-pink); }
.border-brand-navy { border-color: var(--brand-navy); }
.border-brand-pink { border-color: var(--brand-pink); }

/* Navy Variations */
.bg-navy-50 { background-color: var(--navy-50); }
.bg-navy-100 { background-color: var(--navy-100); }
.bg-navy-200 { background-color: var(--navy-200); }
.bg-navy-300 { background-color: var(--navy-300); }
.bg-navy-400 { background-color: var(--navy-400); }
.bg-navy-500 { background-color: var(--navy-500); }
.bg-navy-600 { background-color: var(--navy-600); }
.bg-navy-700 { background-color: var(--navy-700); }
.bg-navy-800 { background-color: var(--navy-800); }
.bg-navy-900 { background-color: var(--navy-900); }

.text-navy-50 { color: var(--navy-50); }
.text-navy-100 { color: var(--navy-100); }
.text-navy-200 { color: var(--navy-200); }
.text-navy-300 { color: var(--navy-300); }
.text-navy-400 { color: var(--navy-400); }
.text-navy-500 { color: var(--navy-500); }
.text-navy-600 { color: var(--navy-600); }
.text-navy-700 { color: var(--navy-700); }
.text-navy-800 { color: var(--navy-800); }
.text-navy-900 { color: var(--navy-900); }

/* Pink Variations */
.bg-pink-50 { background-color: var(--pink-50); }
.bg-pink-100 { background-color: var(--pink-100); }
.bg-pink-200 { background-color: var(--pink-200); }
.bg-pink-300 { background-color: var(--pink-300); }
.bg-pink-400 { background-color: var(--pink-400); }
.bg-pink-500 { background-color: var(--pink-500); }
.bg-pink-600 { background-color: var(--pink-600); }
.bg-pink-700 { background-color: var(--pink-700); }
.bg-pink-800 { background-color: var(--pink-800); }
.bg-pink-900 { background-color: var(--pink-900); }

.text-pink-50 { color: var(--pink-50); }
.text-pink-100 { color: var(--pink-100); }
.text-pink-200 { color: var(--pink-200); }
.text-pink-300 { color: var(--pink-300); }
.text-pink-400 { color: var(--pink-400); }
.text-pink-500 { color: var(--pink-500); }
.text-pink-600 { color: var(--pink-600); }
.text-pink-700 { color: var(--pink-700); }
.text-pink-800 { color: var(--pink-800); }
.text-pink-900 { color: var(--pink-900); }

/* Hover States */
.hover\:bg-brand-navy:hover { background-color: var(--brand-navy); }
.hover\:bg-brand-pink:hover { background-color: var(--brand-pink); }
.hover\:text-brand-navy:hover { color: var(--brand-navy); }
.hover\:text-brand-pink:hover { color: var(--brand-pink); }
.hover\:text-white:hover { color: white !important; }
.hover\:border-white:hover { border-color: white !important; }

/* Brand Gradients */
.bg-gradient-brand {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--navy-700) 100%);
}

.bg-gradient-brand-pink {
  background: linear-gradient(135deg, var(--brand-pink) 0%, var(--pink-700) 100%);
}

.bg-gradient-hero {
  background: linear-gradient(135deg, var(--navy-50) 0%, var(--pink-50) 100%);
}

.bg-gradient-section {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--navy-600) 100%);
}

/* Typography */
.font-inter { font-family: 'Inter', sans-serif; }
.font-fredoka { font-family: 'Fredoka', sans-serif; }

/* Apply Inter as default body font */
body {
  font-family: 'Inter', sans-serif;
}

/* Lighter font weight for Inter headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

/* Fredoka for accent elements */
.font-fredoka {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400 !important;
}

/* Global Fredoka font weight override */
[class*="font-fredoka"] {
  font-weight: 400 !important;
}