/* =========================================================
 * ChatifyIT Brand System
 * Shared CSS variables and font imports.
 * Linked from every page. Pages can opt in to these variables
 * by replacing hardcoded colors with var(--brand-*).
 * Safe to add: defining variables doesn't override anything.
 *
 * ---------------------------------------------------------
 * LOGO COLOR RULE
 * ---------------------------------------------------------
 * Structure: "Chatify" + "IT" with accent color on "IT".
 * Colors adapt to background, ALWAYS within brand palette:
 *
 *   Light backgrounds (white, cream, pale)
 *     → "Chatify" in --brand-navy
 *     → "IT"      in --brand-teal
 *
 *   Dark backgrounds (navy, black, deep teal)
 *     → "Chatify" in #fff
 *     → "IT"      in --brand-yellow
 *
 * Never deviate. Never use a non-brand color for the logo.
 * ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root {
  /* ---- Core brand palette ---- */
  --brand-navy:   #0B1A2E;
  --brand-yellow: #FFD93D;
  --brand-teal:   #0DB4DB;
  --brand-green:  #00B9A3;
  --cream:        #FAF6EC;
  --blush:        #F4D5C7;

  /* ---- Neutrals ---- */
  --text:         #0B1A2E;
  --text-soft:    #4A5568;
  --text-faint:   #718096;
  --gray-50:      #F8FAFC;
  --gray-100:     #F1F5F9;
  --gray-200:     #E2E8F0;
  --gray-700:     #334155;

  /* ---- Typography stacks ---- */
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-serif:   'Playfair Display', serif;
}