/*
 * ═══════════════════════════════════════════════════════════════
 * 🎨 CENTRALIZED THEME COLOR SYSTEM
 * ═══════════════════════════════════════════════════════════════
 * 
 * This file controls colors for ALL HTML files in the project.
 * Change colors here once → Updates across entire website!
 * 
 * PRIMARY   = Main brand color (buttons, CTAs, dark sections)
 * SECONDARY = Accent color (highlights, icons, links)
 * TERTIARY  = Background/Surface colors (cards, sections)
 * NEUTRAL   = Text colors
 * 
 * ═══════════════════════════════════════════════════════════════
 */

:root {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🎨 PRIMARY COLOR (Main Brand - EMERALD GREEN)              */
  /* Change these to update ALL buttons, dark cards & sections   */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --primary-50:  236 253 245;   /* Lightest emerald tint */
  --primary-100: 209 250 229;   /* Light emerald */
  --primary-200: 167 243 208;   /* Medium light emerald */
  --primary-500: 16  185 129;   /* Medium emerald */
  --primary-600: 5   150 105;   /* Rich emerald */
  --primary-700: 4   120 87;    /* ← MAIN PRIMARY COLOR (Deep Emerald) */
  --primary-800: 6   95  70;    /* Deeper emerald */
  --primary-900: 6   78  59;    /* Darkest emerald */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🌟 SECONDARY COLOR (Accent - WARM AMBER)                   */
  /* Change these to update ALL accents, icons & highlights      */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --secondary-50:  255 251 235; /* Lightest amber tint */
  --secondary-100: 254 243 199; /* Light amber */
  --secondary-400: 251 191 36;  /* Medium amber */
  --secondary-500: 245 158 11;  /* ← MAIN SECONDARY COLOR (Warm Amber) */
  --secondary-600: 217 119 6;   /* Deep amber */
  --secondary-700: 180 83  9;   /* Rich amber */
  --secondary-800: 146 64  14;  /* Dark amber */
  --secondary-900: 120 53  15;  /* Darkest amber */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🏛️ TERTIARY COLOR (Backgrounds - SOFT MINT & GRAY)         */
  /* Change these to update ALL card & section backgrounds       */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --tertiary-50:  255 255 255;  /* ← MAIN BACKGROUND (Pure White) */
  --tertiary-100: 247 254 251;  /* Section backgrounds (Soft mint) */
  --tertiary-200: 240 253 244;  /* Fills, track bars, hover states */
  --tertiary-300: 220 242 230;  /* Stronger fills / borders */
  --tertiary-400: 187 230 207;  /* Light emerald fills */
  --tertiary-500: 134 194 164;  /* Medium light emerald fills */
  --tertiary-600: 96  165 134;  /* Medium emerald fills */
  --tertiary-700: 75  125 103;  /* Medium dark emerald */
  --tertiary-800: 55  95  78;   /* Dark emerald */
  --tertiary-900: 31  65  53;   /* Darkest emerald */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 📝 NEUTRAL COLOR (Text - DEEP FOREST CHARCOAL)             */
  /* Change these to update ALL text colors                      */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --neutral-900: 5   38  28;    /* ← MAIN TEXT (Deep forest charcoal) */
  --neutral-700: 31  65  53;    /* Medium text */
  --neutral-500: 75  125 103;   /* Light text */
  --neutral-400: 134 194 164;   /* Lighter text */
  --neutral-300: 187 230 207;   /* Very light text */
  --neutral-200: 220 242 230;   /* Very light emerald */
  --neutral-100: 240 253 244;   /* Near white emerald */
  --neutral-50:  247 254 251;   /* Almost white emerald */
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* Legacy aliases (for backward compatibility)                 */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --c-forest-50:  var(--primary-50);
  --c-forest-100: var(--primary-100);
  --c-forest-200: var(--primary-200);
  --c-forest-500: var(--primary-500);
  --c-forest-600: var(--primary-600);
  --c-forest-700: var(--primary-700);
  --c-forest-800: var(--primary-800);
  --c-forest-900: var(--primary-900);

  --c-gold-50:  var(--secondary-50);
  --c-gold-100: var(--secondary-100);
  --c-gold-400: var(--secondary-400);
  --c-gold-500: var(--secondary-500);
  --c-gold-600: var(--secondary-600);
  --c-gold-700: var(--secondary-700);

  --c-cream-50:  var(--tertiary-50);
  --c-cream-100: var(--tertiary-100);
  --c-cream-200: var(--tertiary-200);
  --c-cream-300: var(--tertiary-300);

  --c-ink-900: var(--neutral-900);
  --c-ink-700: var(--neutral-700);
  --c-ink-500: var(--neutral-500);
  --c-ink-400: var(--neutral-400);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* Semantic UI Variables (for wylth-home.html)                 */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* Buttons */
  --btn-primary-bg: rgb(var(--primary-700));
  --btn-primary-bg-hover: rgb(var(--primary-800));
  --btn-primary-text: rgb(var(--tertiary-50));

  --btn-secondary-bg: rgb(var(--tertiary-50));
  --btn-secondary-bg-hover: rgb(var(--tertiary-100));
  --btn-secondary-text: rgb(var(--primary-700));
  --btn-secondary-border: rgba(var(--neutral-900) / 0.14);

  /* Cards */
  --card-bg-primary: rgb(var(--tertiary-50));
  --card-bg-secondary: rgb(var(--tertiary-100));
  --card-bg-dark: rgb(var(--primary-700));
  --card-border: rgba(var(--neutral-900) / 0.08);

  /* Sections */
  --section-bg-primary: rgb(var(--tertiary-50));
  --section-bg-secondary: rgb(var(--tertiary-100));
  --section-bg-dark: rgb(var(--primary-700));

  /* Hero gradients */
  --hero-glow-gold: rgba(var(--secondary-500) / 0.06);
  --hero-glow-forest: rgba(var(--primary-700) / 0.07);
  --hero-bg-top: rgb(var(--tertiary-50));
  --hero-bg-bottom: rgb(var(--tertiary-100));

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🎨 QUICK THEME EXAMPLES                                     */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /*
   * ✅ CURRENT: EMERALD GREEN & WARM AMBER (Fresh & Professional)
   * --primary-700: 4 120 87;     (Deep Emerald Green)
   * --secondary-500: 245 158 11; (Warm Amber)
   * --tertiary-50: 255 255 255;  (Pure White)
   * --neutral-900: 5 38 28;      (Deep Forest Charcoal)
   *
   * CLASSIC BLACK & GOLD:
   * --primary-700: 0 0 0;
   * --secondary-500: 234 179 8;
   * --neutral-900: 0 0 0;
   *
   * PREMIUM NAVY & GOLD:
   * --primary-700: 15 48 130;
   * --secondary-500: 217 149 15;
   * --tertiary-50: 255 255 255;
   * --neutral-900: 17 24 39;
   *
   * MODERN PURPLE & PINK:
   * --primary-700: 109 40 217;
   * --secondary-500: 236 72 153;
   * --neutral-900: 30 20 60;
   */
}

/* ═══════════════════════════════════════════════════════════════ */
/* 💡 HOW TO USE:                                                  */
/* ═══════════════════════════════════════════════════════════════ */
/*
 * 1. Link this file in your HTML <head>:
 *    <link rel="stylesheet" href="theme-colors.css">
 *
 * 2. Change PRIMARY-700 (line 27) to update buttons, dark sections & CTAs
 * 3. Change SECONDARY-500 (line 39) to update accents, highlights & gold elements
 * 4. Change TERTIARY-50 (line 48) to update backgrounds & cards
 * 5. Change NEUTRAL-900 (line 63) to update all text colors
 *
 * 6. Save this file → Refresh browser → All pages update instantly! ✨
 *
 * 💎 CURRENT THEME: Emerald Green & Warm Amber
 * Perfect for financial services - fresh, trustworthy, growth-oriented
 * All semantic variables (buttons, cards, sections) are auto-configured!
 */