/*
 * ═══════════════════════════════════════════════════════════════
 * 🎨 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 INDIGO)             */
  /* Change these to update ALL buttons, dark cards & sections   */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --primary-50:  238 242 255;   /* Lightest indigo tint */
  --primary-100: 224 231 255;   /* Light indigo */
  --primary-200: 199 210 254;   /* Medium light indigo */
  --primary-500: 99  102 241;   /* Medium indigo */
  --primary-600: 79  70  229;   /* Rich indigo */
  --primary-700: 67  56  202;   /* ← MAIN PRIMARY COLOR (Premium Indigo) */
  --primary-800: 55  48  163;   /* Deep indigo */
  --primary-900: 49  46  129;   /* Darkest indigo */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🌟 SECONDARY COLOR (Accent - VIBRANT 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 light amber */
  --secondary-500: 245 158 11;  /* ← MAIN SECONDARY COLOR (Vibrant Amber) */
  --secondary-600: 217 119 6;   /* Rich amber */
  --secondary-700: 180 83  9;   /* Deep amber */
  --secondary-800: 146 64  14;  /* Dark amber */
  --secondary-900: 120 53  15;  /* Darkest amber */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 🏛️ TERTIARY COLOR (Backgrounds - CLEAN WHITE & LIGHT)      */
  /* Change these to update ALL card & section backgrounds       */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --tertiary-50:  255 255 255;  /* ← MAIN BACKGROUND (Pure White) */
  --tertiary-100: 249 250 251;  /* Section backgrounds (Subtle gray) */
  --tertiary-200: 243 244 246;  /* Fills, track bars, hover states */
  --tertiary-300: 229 231 235;  /* Stronger fills / borders */
  --tertiary-400: 209 213 219;  /* Light gray fills */
  --tertiary-500: 156 163 175;  /* Medium light gray fills */
  --tertiary-600: 107 114 128;  /* Medium gray fills */
  --tertiary-700: 75  85  99;   /* Medium dark gray */
  --tertiary-800: 55  65  81;   /* Dark gray */
  --tertiary-900: 31  41  55;   /* Darkest gray */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 📝 NEUTRAL COLOR (Text - DARK FOR LIGHT BACKGROUNDS)       */
  /* Change these to update ALL text colors                      */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --neutral-900: 17  24  39;    /* ← MAIN TEXT (Deep charcoal) */
  --neutral-700: 55  65  81;    /* Medium text */
  --neutral-500: 107 114 128;   /* Light text */
  --neutral-400: 156 163 175;   /* Lighter text */
  --neutral-300: 209 213 219;   /* Very light text */
  --neutral-200: 229 231 235;   /* Very light gray */
  --neutral-100: 243 244 246;   /* Near white */
  --neutral-50:  249 250 251;   /* 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 INDIGO & AMBER (Bold & Vibrant)
   * --primary-700: 67 56 202;     (Premium Indigo)
   * --secondary-500: 245 158 11;  (Vibrant Amber)
   * --tertiary-50: 255 255 255;   (Pure White)
   * --neutral-900: 17 24 39;      (Deep Charcoal)
   *
   * MIDNIGHT PURPLE & SILVER (Modern Premium):
   * --primary-700: 88 28 135;
   * --secondary-500: 161 161 170;
   * --tertiary-50: 24 24 27;
   * --neutral-900: 250 250 250;
   *
   * PREMIUM NAVY & GOLD (Professional & Elegant):
   * --primary-700: 15 48 130;
   * --secondary-500: 217 149 15;
   * --tertiary-50: 255 255 255;
   * --neutral-900: 17 24 39;
   *
   * CLASSIC BLACK & GOLD:
   * --primary-700: 0 0 0;
   * --secondary-500: 234 179 8;
   * --tertiary-50: 255 255 255;
   * --neutral-900: 0 0 0;
   */
}

/* ═══════════════════════════════════════════════════════════════ */
/* 💡 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 Indigo & Amber
 * Perfect for premium fintech - bold, vibrant, trustworthy
 * All semantic variables (buttons, cards, sections) are auto-configured!
 * Clean light theme with excellent text contrast for optimal readability!
 */