/* ============================================================
   Themes — Light (default) / Dark
   Applied: Visual Designer + UI/UX Pro Max (WCAG AA contrast)
   ============================================================ */

[data-theme="dark"] {
  /* Brand */
  --brand-50:    #0A1A3A;
  --brand-100:   #11294D;
  --brand-200:   #1A3E6A;
  --brand-300:   #235392;
  --brand-400:   #3068B8;
  --brand-500:   #3B82F6;
  --brand-600:   #60A5FA;
  --brand-700:   #93C5FD;
  --brand-800:   #BFDBFE;
  --brand-900:   #DBEAFE;

  --brand:       var(--brand-600);
  --brand-light: var(--brand-500);
  --brand-dark:  var(--brand-700);
  --brand-bg:    var(--brand-100);

  /* Accent */
  --accent-50:   #1A1035;
  --accent-400:  #7C3AED;
  --accent-500:  #8B5CF6;
  --accent-600:  #A78BFA;
  --accent-700:  #C4B5FD;
  --accent:      var(--accent-600);
  --accent-light:var(--accent-500);
  --accent-dark: var(--accent-700);
  --accent-bg:   var(--accent-50);

  /* Semantic */
  --success:     #34D399;
  --success-light:#10B981;
  --success-bg:  #052E16;
  --warning:     #FBBF24;
  --warning-light:#F59E0B;
  --warning-bg:  #2E1A00;
  --danger:      #F87171;
  --danger-light:#EF4444;
  --danger-bg:   #2D0A0A;

  --safe:        var(--success);
  --safe-light:  var(--success-light);
  --safe-bg:     var(--success-bg);
  --warn:        var(--warning);
  --warn-light:  var(--warning-light);
  --warn-bg:     var(--warning-bg);

  /* Youthful accents (dark) */
  --mint:        #02C39A;
  --mint-light:  #00A896;
  --mint-bg:     #052018;
  --lavender:    #B388FF;
  --lavender-light:#7C4DFF;
  --lavender-dark:#D1C4E9;
  --lavender-bg: #1A1035;
  --coral:       #FF8A80;
  --coral-light: #FF6B6B;
  --coral-bg:    #2D0808;
  --sunset:      #FF9100;
  --sunset-light:#FF6D00;
  --sunset-bg:   #2E1A00;
  --teal:        #00897B;
  --teal-light:  #00695C;
  --teal-bg:     #051C18;

  /* Surface */
  --ink:         #F1F5F6;
  --ink-secondary:#CBD5E1;
  --ink-tertiary: #64748B;
  --line:         #334155;
  --line-light:   #1E293B;
  --bg:           #0F172A;
  --bg-alt:       #1E293B;
  --card:         #1E293B;
  --overlay:      rgba(0,0,0,0.65);

  /* Shadows (deeper in dark) */
  --shadow-none:  0 0 0 transparent;
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.28);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.42), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl:    0 20px 25px rgba(0,0,0,0.48), 0 8px 10px rgba(0,0,0,0.32);
  --shadow-2xl:   0 25px 50px rgba(0,0,0,0.6);

  --shadow-card:  var(--shadow-md);
  --shadow-modal: var(--shadow-xl);
  --shadow-btn:   0 2px 8px rgba(96,165,250,0.2);
  --shadow-btn-hover: 0 4px 16px rgba(96,165,250,0.3);

  /* Focus ring */
  --focus-ring-color: rgba(96,165,250,0.3);
}