/* ═══════════════════════════════════════════════════════════
   DXB DEALS — THEMES
   noon.com colors + Material Design elevation
   Set THEME= in .env to switch
   ═══════════════════════════════════════════════════════════

   Themes:
     noon-light    → noon.com exact: white + #FFDD00 yellow (DEFAULT)
     midnight      → deep navy dark + yellow accent
     sand-light    → warm off-white + terracotta
     souq-bold     → dark purple + electric yellow
*/

/* ─────────────────────────────────────────────────────────
   1. NOON LIGHT  (noon.com exact palette)
   ───────────────────────────────────────────────────────── */
[data-theme="noon-light"] {
  /* Backgrounds */
  --bg-base:        #F5F5F5;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FAFAFA;
  --bg-filter:      #FFFFFF;

  /* Borders */
  --border:         #E8E8E8;
  --border-subtle:  #F0F0F0;

  /* noon yellow */
  --accent:         #FFDD00;
  --accent-bright:  #F5C800;
  --accent-dim:     #E6B800;
  --accent-bg:      rgba(255,221,0,0.12);

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #555555;
  --text-muted:     #999999;
  --text-on-accent: #1A1A1A;

  /* Tags */
  --tag-bg:         #F5F5F5;
  --tag-border:     #E0E0E0;
  --tag-text:       #666666;
  --tag-active-bg:  #FFDD00;
  --tag-active-text:#1A1A1A;

  /* Badges */
  --badge-new:           #E8F5E9;
  --badge-new-text:      #1B5E20;
  --badge-used:          #F5F5F5;
  --badge-used-text:     #616161;
  --badge-warranty:      #E3F2FD;
  --badge-warranty-text: #0D47A1;
  --badge-urgent:        #FFEBEE;
  --badge-urgent-text:   #B71C1C;

  /* Inputs */
  --input-bg:       #FFFFFF;
  --input-border:   #DDDDDD;
  --input-focus:    #FFDD00;

  /* Material elevation shadows */
  --shadow-card:    0 1px 2px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-hover:   0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-filter:  0 2px 4px rgba(0,0,0,0.06);
  --shadow-modal:   0 24px 48px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.10);

  /* Header / Footer */
  --header-bg:      rgba(255,255,255,0.96);
  --footer-bg:      #1A1A1A;
  --footer-text:    #AAAAAA;

  /* Radii */
  --radius-card:    8px;
  --radius-btn:     6px;
  --radius-input:   6px;
  --radius-modal:   12px;
  --radius-tag:     100px;
  --radius-badge:   4px;
}

/* ─────────────────────────────────────────────────────────
   2. MIDNIGHT  (dark navy + noon yellow)
   ───────────────────────────────────────────────────────── */
[data-theme="midnight"] {
  --bg-base:        #0A0E1A;
  --bg-surface:     #111827;
  --bg-card:        #151E2E;
  --bg-card-hover:  #1C2538;
  --bg-filter:      #0F1520;
  --border:         #1E293B;
  --border-subtle:  #162032;

  --accent:         #FFDD00;
  --accent-bright:  #FFE833;
  --accent-dim:     #B8A000;
  --accent-bg:      rgba(255,221,0,0.08);

  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #475569;
  --text-on-accent: #0A0E1A;

  --tag-bg:         #1E293B;
  --tag-border:     #2D3F55;
  --tag-text:       #64748B;
  --tag-active-bg:  #FFDD00;
  --tag-active-text:#0A0E1A;

  --badge-new:           #064E3B;
  --badge-new-text:      #6EE7B7;
  --badge-used:          #1E293B;
  --badge-used-text:     #94A3B8;
  --badge-warranty:      #1E3A5F;
  --badge-warranty-text: #93C5FD;
  --badge-urgent:        #4C0519;
  --badge-urgent-text:   #FDA4AF;

  --input-bg:       #111827;
  --input-border:   #1E293B;
  --input-focus:    #FFDD00;

  --shadow-card:    0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-hover:   0 8px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(255,221,0,0.08);
  --shadow-filter:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-modal:   0 24px 60px rgba(0,0,0,0.7);

  --header-bg:      rgba(10,14,26,0.96);
  --footer-bg:      #060910;
  --footer-text:    #475569;

  --radius-card:    10px;
  --radius-btn:     6px;
  --radius-input:   6px;
  --radius-modal:   14px;
  --radius-tag:     100px;
  --radius-badge:   4px;
}

/* ─────────────────────────────────────────────────────────
   3. SAND LIGHT  (warm cream + terracotta)
   ───────────────────────────────────────────────────────── */
[data-theme="sand-light"] {
  --bg-base:        #F7F3EE;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FDF9F5;
  --bg-filter:      #FFFFFF;
  --border:         #E5DDD5;
  --border-subtle:  #EDE8E2;

  --accent:         #C0471A;
  --accent-bright:  #D4541F;
  --accent-dim:     #8C3313;
  --accent-bg:      rgba(192,71,26,0.07);

  --text-primary:   #1C1712;
  --text-secondary: #5C4F3D;
  --text-muted:     #9C8E7E;
  --text-on-accent: #FFFFFF;

  --tag-bg:         #F2EDE7;
  --tag-border:     #DDD5CC;
  --tag-text:       #7A6A56;
  --tag-active-bg:  #C0471A;
  --tag-active-text:#FFFFFF;

  --badge-new:           #D4EDDA;
  --badge-new-text:      #155724;
  --badge-used:          #F2EDE7;
  --badge-used-text:     #5C4F3D;
  --badge-warranty:      #D1ECF1;
  --badge-warranty-text: #0C5460;
  --badge-urgent:        #F8D7DA;
  --badge-urgent-text:   #721C24;

  --input-bg:       #FFFFFF;
  --input-border:   #D5CAC0;
  --input-focus:    #C0471A;

  --shadow-card:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-hover:   0 6px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-filter:  0 2px 6px rgba(0,0,0,0.06);
  --shadow-modal:   0 24px 48px rgba(0,0,0,0.15);

  --header-bg:      rgba(247,243,238,0.96);
  --footer-bg:      #2C2218;
  --footer-text:    #9C8E7E;

  --radius-card:    10px;
  --radius-btn:     8px;
  --radius-input:   8px;
  --radius-modal:   14px;
  --radius-tag:     100px;
  --radius-badge:   4px;
}

/* ─────────────────────────────────────────────────────────
   4. SOUQ BOLD  (deep purple + electric yellow)
   ───────────────────────────────────────────────────────── */
[data-theme="souq-bold"] {
  --bg-base:        #0D0B14;
  --bg-surface:     #13101E;
  --bg-card:        #18152A;
  --bg-card-hover:  #1F1B35;
  --bg-filter:      #100E1C;
  --border:         #2A2545;
  --border-subtle:  #1E1A33;

  --accent:         #FFE000;
  --accent-bright:  #FFE933;
  --accent-dim:     #B8A200;
  --accent-bg:      rgba(255,224,0,0.08);

  --text-primary:   #EEEAF8;
  --text-secondary: #8B82AA;
  --text-muted:     #4A4368;
  --text-on-accent: #0D0B14;

  --tag-bg:         #1E1A33;
  --tag-border:     #2E2850;
  --tag-text:       #7068A0;
  --tag-active-bg:  #FFE000;
  --tag-active-text:#0D0B14;

  --badge-new:           #0A2E1E;
  --badge-new-text:      #4ADE80;
  --badge-used:          #1E1A33;
  --badge-used-text:     #8B82AA;
  --badge-warranty:      #0F1A3A;
  --badge-warranty-text: #60A5FA;
  --badge-urgent:        #2E0A14;
  --badge-urgent-text:   #F87171;

  --input-bg:       #13101E;
  --input-border:   #2A2545;
  --input-focus:    #FFE000;

  --shadow-card:    0 2px 6px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-hover:   0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(255,224,0,0.06);
  --shadow-filter:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-modal:   0 24px 60px rgba(0,0,0,0.75);

  --header-bg:      rgba(13,11,20,0.96);
  --footer-bg:      #080612;
  --footer-text:    #4A4368;

  --radius-card:    8px;
  --radius-btn:     6px;
  --radius-input:   6px;
  --radius-modal:   12px;
  --radius-tag:     100px;
  --radius-badge:   4px;
}