/*
 * ═══════════════════════════════════════════════════════════════
 * 🎨 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 - PREMIUM BLUE-TEAL)          */
  /* Change these to update ALL buttons, dark cards & sections   */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --primary-50:  239 247 250;   /* Lightest blue-teal tint */
  --primary-100: 219 238 244;   /* Light blue-teal */
  --primary-200: 191 224 237;   /* Medium light blue-teal */
  --primary-500: 59  143 181;   /* Medium blue-teal */
  --primary-600: 37  114 158;   /* Rich blue-teal */
  --primary-700: 29  95  142;   /* ← MAIN PRIMARY COLOR (Premium Blue-Teal) */
  --primary-800: 30  78  116;   /* Deep blue-teal */
  --primary-900: 23  48  71;    /* Darkest blue-teal */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🌟 SECONDARY COLOR (Accent - PLATINUM & SILVER)            */
  /* Change these to update ALL accents, icons & highlights      */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --secondary-50:  250 250 252; /* Lightest platinum tint */
  --secondary-100: 243 244 247; /* Light platinum */
  --secondary-400: 168 175 191; /* Medium platinum */
  --secondary-500: 132 142 166; /* ← MAIN SECONDARY COLOR (Platinum) */
  --secondary-600: 100 108 128; /* Deep platinum */
  --secondary-700: 75  81  99;  /* Rich platinum */
  --secondary-800: 58  63  77;  /* Dark platinum */
  --secondary-900: 43  47  58;  /* Darkest platinum */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🏛️ TERTIARY COLOR (Backgrounds - PLATINUM & LIGHT GRAY)    */
  /* Change these to update ALL card & section backgrounds       */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --tertiary-50:  255 255 255;  /* ← MAIN BACKGROUND (Pure White) */
  --tertiary-100: 248 249 251;  /* Section backgrounds (Soft platinum) */
  --tertiary-200: 241 243 247;  /* Fills, track bars, hover states */
  --tertiary-300: 226 230 237;  /* Stronger fills / borders */
  --tertiary-400: 203 209 219;  /* Light gray fills */
  --tertiary-500: 156 163 177;  /* Medium light gray fills */
  --tertiary-600: 107 114 130;  /* Medium gray fills */
  --tertiary-700: 75  82  99;   /* Medium dark gray */
  --tertiary-800: 52  60  78;   /* Dark gray */
  --tertiary-900: 30  36  51;   /* Darkest gray */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 📝 NEUTRAL COLOR (Text - PROFESSIONAL NAVY-TINTED GRAY)    */
  /* Change these to update ALL text colors                      */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --neutral-900: 15  23  42;    /* ← MAIN TEXT (Navy-tinted charcoal) */
  --neutral-700: 51  65  85;    /* Medium text */
  --neutral-500: 100 116 139;   /* Light text */
  --neutral-400: 148 163 184;   /* Lighter text */
  --neutral-300: 203 213 225;   /* Very light text */
  --neutral-200: 226 232 240;   /* Very light gray */
  --neutral-100: 241 245 249;   /* Near white */
  --neutral-50:  248 250 252;   /* Almost white */
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 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: PREMIUM BLUE-TEAL & PLATINUM (Sophisticated & Professional)
   * --primary-700: 29 95 142;     (Blue-Teal with 10% Green)
   * --secondary-500: 132 142 166; (Elegant Platinum)
   * --tertiary-50: 255 255 255;   (Pure White)
   * --neutral-900: 15 23 42;      (Navy-tinted Charcoal)
   *
   * CLASSIC BLACK & GOLD:
   * --primary-700: 0 0 0;
   * --secondary-500: 234 179 8;
   * --neutral-900: 0 0 0;
   *
   * DEEP FOREST GREEN:
   * --primary-700: 21 128 61;
   * --secondary-500: 34 197 94;
   * --tertiary-50: 245 245 220;
   * --neutral-900: 20 83 45;
   *
   * 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: Premium Blue-Teal & Platinum
 * Perfect for financial services - sophisticated, modern, trustworthy & premium
 * Blue with 10% green creates a calming, professional teal accent
 * All semantic variables (buttons, cards, sections) are auto-configured!
 */