/**
 * The Lion's Kingdom IT Solutions LLC
 * COLOR PALETTE — Edit this file to change the site theme.
 *
 * All colors across the entire site reference these CSS variables.
 * Change a value here to update it everywhere instantly.
 */

:root {

  /* ============================================================
     BRAND COLORS
     ============================================================ */
  --gold:            #C9A843;   /* Primary brand gold (from logo) */
  --gold-dark:       #9A7A28;   /* Darker gold — hover states, borders */
  --gold-light:      #E8D080;   /* Lighter gold — highlights, icons */
  --gold-pale:       #F5EBC8;   /* Very pale gold — subtle tints */

  /* ============================================================
     BACKGROUNDS
     ============================================================ */
  --bg-hero:         #0F1820;   /* Hero sections, dark CTAs */
  --bg-dark:         #1A2535;   /* Dark cards, alternate sections */
  --bg-mid:          #243347;   /* Mid-tone accent panels */
  --bg-light:        #F7F5EF;   /* Main page background (warm off-white) */
  --bg-card:         #FFFFFF;   /* White service cards */
  --bg-footer:       #080D12;   /* Footer */

  /* ============================================================
     TEXT — ON LIGHT BACKGROUNDS (#F7F5EF, #FFFFFF)
     ============================================================ */
  --text-heading:    #12181F;   /* Page / section headings */
  --text-body:       #2E3542;   /* Body copy */
  --text-muted:      #5A6475;   /* Captions, secondary copy */

  /* ============================================================
     TEXT — ON DARK BACKGROUNDS (#0F1820, #1A2535)
     ============================================================ */
  --text-on-dark:    #EDE8D8;   /* Body copy on dark sections */
  --text-gold:       #C9A843;   /* Gold accents on dark backgrounds */

  /* ============================================================
     TEXT — FOOTER (exception: dark bg, softer text allowed)
     ============================================================ */
  --text-footer:         #B8A870;   /* Footer body text */
  --text-footer-heading: #E8D080;   /* Footer headings */
  --text-footer-link:    #C9A843;   /* Footer links */

  /* ============================================================
     UI ELEMENTS
     ============================================================ */
  --border-light:    #E0D8C0;
  --border-dark:     #2A3A4A;
  --border-gold:     #C9A843;

  --shadow-sm:       0 2px 8px  rgba(0, 0, 0, 0.08);
  --shadow-md:       0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.20);
  --shadow-gold:     0 4px 24px rgba(201, 168, 67, 0.30);

  /* ============================================================
     BUTTONS
     ============================================================ */
  --btn-primary-bg:         #C9A843;
  --btn-primary-text:       #12181F;   /* Dark text on gold — high contrast */
  --btn-primary-hover-bg:   #9A7A28;
  --btn-primary-hover-text: #F7F5EF;

  --btn-outline-text:       #C9A843;
  --btn-outline-border:     #C9A843;
  --btn-outline-hover-bg:   #C9A843;
  --btn-outline-hover-text: #12181F;

  --btn-light-bg:           #F7F5EF;
  --btn-light-text:         #12181F;
  --btn-light-hover-bg:     #E8D080;

  /* ============================================================
     TRANSITIONS & LAYOUT
     ============================================================ */
  --transition:       0.25s ease;
  --transition-fast:  0.15s ease;

  --section-py:       80px;
  --section-py-sm:    48px;
  --container-max:    1200px;
  --container-px:     24px;
  --radius:           8px;
  --radius-lg:        16px;
  --radius-full:      9999px;
}