/* 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-color: var(--pink-50);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FCE7F3' fill-opacity='0.6' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.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; }
.font-caveat { font-family: 'Caveat', cursive; }

/* 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;
}