/* ===================================================================
 * VARIABLES.CSS — Design Tokens (Light & Dark)
 * ------------------------------------------------------------------- */

:root {
  /* ── Brand Colors ── */
  --clr-primary:       #2ecc71;
  --clr-primary-dark:  #27ae60;
  --clr-primary-darker:#219653;
  --clr-primary-light: #a2f5bf;
  --clr-primary-lighter:#d1f7e0;

  /* ── Light Theme Surfaces ── */
  --clr-bg:            #ffffff;
  --clr-bg-alt:        #f5f5f5;
  --clr-bg-card:       #ffffff;
  --clr-border:        #e0e0e0;

  /* ── Light Theme Text ── */
  --clr-text:          #212121;
  --clr-text-muted:    #757575;
  --clr-text-faint:    #9e9e9e;

  /* ── Inverted (footer, dark sections) ── */
  --clr-dark-bg:       #1a1a2e;
  --clr-dark-surface:  #16213e;
  --clr-dark-text:     #e8e8e8;
  --clr-dark-muted:    #9e9e9e;

  /* ── Typography ── */
  --font-display:      'Syne', sans-serif;
  --font-body:         'DM Sans', sans-serif;

  /* ── Spacing Scale ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Radii ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.18);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-xl:    0 20px 40px rgba(0,0,0,0.14), 0 6px 12px rgba(0,0,0,0.06);
  --shadow-green: 0 6px 20px rgba(46,204,113,0.35);

  /* ── Transitions ── */
  --t-fast:   0.15s ease;
  --t-normal: 0.3s ease;
  --t-slow:   0.5s ease;
  --t-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Z-index layers ── */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal:    1040;
  --z-preloader:1070;
}

/* ===================================================================
 * DARK MODE OVERRIDES
 * Toggle via: document.documentElement.setAttribute('data-theme','dark')
 * ------------------------------------------------------------------- */
[data-theme="dark"] {
  --clr-bg:         #0f0f17;
  --clr-bg-alt:     #16161f;
  --clr-bg-card:    #1c1c27;
  --clr-border:     #2a2a3a;

  --clr-text:       #f0f0f0;
  --clr-text-muted: #a0a0b0;
  --clr-text-faint: #606080;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.50);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-lg:    0 10px 24px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.30);
  --shadow-xl:    0 20px 40px rgba(0,0,0,0.60), 0 6px 12px rgba(0,0,0,0.30);
}