/* ============================================================
   DSW V2 - Visual Identity (District 1 Corporate Tech Style)
   Core: Matches District 1 design style (Light, Clean, Tech Blue #206088, Light Blue #A5CDD7)
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --primary: #206088;
  --primary-rgb: 32,96,136;
  --primary-dark: #164360;
  --primary-darker: #0C2638;
  --primary-light: #A5CDD7;
  --primary-light-rgb: 165,205,215;
  --royal-blue: #206088;
  --accent: #E63946;
  --accent-rgb: 230,57,70;
  --accent-light: #F43F5E;
  --accent-dark: #B91C1C;
  --gold: #C5A880;

  /* ---- Text Colors ---- */
  --text: #1E293B;
  --text-rgb: 30,41,59;
  --text-light: #3F3F46;
  --text-muted: #71717A;

  /* ---- Backgrounds ---- */
  --bg-dark: #F4F7F9;
  --bg-section: #F8FAFC;
  --bg-light: #FFFFFF;
  --white: #ffffff;
  --card-bg: #ffffff;
  --body-bg: #ffffff;

  /* ---- Borders & Shadows ---- */
  --border: #E2E8F0;
  --shadow: 0 10px 30px -10px rgba(32,96,136,0.06);
  --shadow-hover: 0 20px 40px -12px rgba(32,96,136,0.1);
  --shadow-glow: 0 0 30px rgba(32,96,136,0.06);

  /* ---- Radius ---- */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;

  /* ---- Transitions ---- */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Typography ---- */
  --font-primary: 'Cairo', 'Inter', sans-serif;
  --font-display: 'Space Grotesk', 'Playfair Display', serif;
  --font-secondary: 'Poppins', 'Jost', sans-serif;
  --font-mono: 'Inter', monospace;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, #206088 0%, #0C2638 100%);
  --gradient-accent: linear-gradient(135deg, #E63946 0%, #B91C1C 100%);
  --gradient-glow: linear-gradient(135deg, rgba(165,205,215,0.15), rgba(32,96,136,0.05));
  --gradient-mesh: radial-gradient(at 0% 0%, rgba(32,96,136,0.06) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(165,205,215,0.05) 0px, transparent 50%), #FFFFFF;
  --gradient-tech: linear-gradient(135deg, #FFFFFF 0%, #F4F7F9 50%, #E2E8F0 100%);

  /* ---- Glass ---- */
  --glass: rgba(255,255,255,0.8);
  --glass-border: rgba(255,255,255,0.6);
  --glass-shadow: 0 8px 32px rgba(32,96,136,0.05);

  /* ---- Semantic ---- */
  --success: #10B981;
  --success-dark: #059669;
  --star: #F59E0B;
  --hero-mid: #E2E8F0;

  /* ---- Header / Nav (Light Mode) ---- */
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(32, 96, 136, 0.08);
  --nav-shadow: 0 4px 30px rgba(32, 96, 136, 0.04);
  --nav-link-color: #242424;
  --nav-link-hover-color: #206088;
  --nav-link-active-color: #206088;
  --nav-link-hover-bg: rgba(32, 96, 136, 0.05);
  --nav-link-active-bg: rgba(32, 96, 136, 0.08);
  --toggler-filter: none;

  /* ---- Hero (Light Mode) ---- */
  --hero-bg: var(--gradient-mesh);
  --hero-text: #242424;
  --hero-desc: #555555;
  --hero-overlay: rgba(255, 255, 255, 0.65);
  
  /* ---- Page Header (Light Mode) ---- */
  --page-header-bg: linear-gradient(135deg, #F4F7F9 0%, #FFFFFF 100%);
  --page-header-text: #242424;
  --page-header-desc: #555555;

  /* ---- Buttons (Light Mode) ---- */
  --btn-outline-color: var(--primary);
  --btn-outline-border: rgba(32, 96, 136, 0.35);
  --btn-outline-hover-bg: rgba(32, 96, 136, 0.05);
  --btn-outline-hover-color: var(--primary);
  --btn-outline-hover-border: var(--primary);
}

/* ====== DARK MODE ====== */
[data-theme="dark"] {
  --primary: #A5CDD7;
  --primary-rgb: 165,205,215;
  --primary-dark: #206088;
  --primary-light: #164360;
  --primary-light-rgb: 22,67,96;
  --text: #F8FAFC;
  --text-rgb: 248,250,252;
  --text-light: #E4E4E7;
  --text-muted: #94A3B8;
  --bg-dark: #030712;
  --bg-section: #0B0F19;
  --bg-light: #070B19;
  --white: #0E1428;
  --border: #1F2937;
  --card-bg: #0E1428;
  --body-bg: #030712;
  --shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
  --shadow-hover: 0 20px 50px -12px rgba(0,0,0,0.7);
  --glass: rgba(14,20,40,0.4);
  --glass-border: rgba(255,255,255,0.05);
  --gradient-primary: linear-gradient(135deg, #206088 0%, #0C2638 100%);
  --gradient-mesh: radial-gradient(at 0% 0%, rgba(32,96,136,0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(165,205,215,0.1) 0px, transparent 50%), #030712;
  --gradient-tech: linear-gradient(135deg, #030712 0%, #0E1428 50%, #030712 100%);
  --success: #34D399;
  --success-dark: #059669;
  --hero-mid: #0B0F19;

  /* ---- Header / Nav (Dark Mode) ---- */
  --nav-bg: rgba(3, 7, 18, 0.92);
  --nav-border: rgba(255, 255, 255, 0.05);
  --nav-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  --nav-link-color: rgba(255, 255, 255, 0.85);
  --nav-link-hover-color: #A5CDD7;
  --nav-link-active-color: #A5CDD7;
  --nav-link-hover-bg: rgba(165, 205, 215, 0.08);
  --nav-link-active-bg: rgba(165, 205, 215, 0.12);
  --toggler-filter: brightness(0) invert(1);

  /* ---- Hero (Dark Mode) ---- */
  --hero-bg: var(--gradient-mesh);
  --hero-text: #F8FAFC;
  --hero-desc: #CBD5E1;
  --hero-overlay: rgba(3, 7, 18, 0.82);

  /* ---- Page Header (Dark Mode) ---- */
  --page-header-bg: var(--gradient-primary);
  --page-header-text: #FFFFFF;
  --page-header-desc: #CBD5E1;

  /* ---- Buttons (Dark Mode) ---- */
  --btn-outline-color: var(--text);
  --btn-outline-border: rgba(255, 255, 255, 0.25);
  --btn-outline-hover-bg: rgba(255, 255, 255, 0.1);
  --btn-outline-hover-color: var(--text);
  --btn-outline-hover-border: rgba(255, 255, 255, 0.5);
}

/* ---- Dark/Light Mode Global Overrides ---- */
body { background: var(--body-bg); color: var(--text); }
[data-theme="dark"] body { background: var(--body-bg); color: var(--text); }

[data-theme="dark"] .service-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .flip-card-front,
[data-theme="dark"] .flip-card-back,
[data-theme="dark"] .cart-sidebar,
[data-theme="dark"] .checkout-content,
[data-theme="dark"] .qv-modal,
[data-theme="dark"] .cmp-modal,
[data-theme="dark"] .compare-bar,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .timeline-card,
[data-theme="dark"] .toast-notification,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .category-tab { background: var(--card-bg) !important; border-color: var(--border) !important; }

.section-badge { background: rgba(var(--primary-rgb),0.06); color: var(--primary); }
[data-theme="dark"] .section-badge { background: rgba(var(--primary-light-rgb),0.1); color: var(--primary); }
[data-theme="dark"] .section-sub { color: var(--text-light); }
[data-theme="dark"] .sort-select { background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background: var(--card-bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { border-color: var(--primary); }
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .faq-section { background: var(--bg-section); }
[data-theme="dark"] .category-tab:hover { background: var(--bg-section); }
[data-theme="dark"] .cart-item { border-color: var(--border); }
[data-theme="dark"] .btn-add-cart { opacity: 0.9; }
[data-theme="dark"] .newsletter-section { background: var(--bg-section); }
[data-theme="dark"] .preloader { background: var(--bg-dark); }
[data-theme="dark"] .contact-info-card { background: var(--primary-dark); }
[data-theme="dark"] .about-section::before { background: var(--bg-section); }
[data-theme="dark"] .experience-section { background: var(--bg-section); }
[data-theme="dark"] a:hover { color: var(--primary); }

.site-header.scrolled { background: var(--nav-bg); border-bottom-color: var(--nav-border); box-shadow: var(--nav-shadow); }
[data-theme="dark"] .site-header.scrolled { background: var(--nav-bg); border-bottom-color: var(--nav-border); }
[data-theme="dark"] .header-cta:hover { box-shadow: 0 8px 30px rgba(var(--primary-rgb),0.35); }
.cart-count { background: var(--accent); color: #ffffff; box-shadow: 0 2px 10px rgba(var(--accent-rgb),0.3); }
[data-theme="dark"] .page-header::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255, 255, 255, 0.03)' d='M0,160L48,176C96,192,192,224,288,218.7C384,213,480,171,576,149.3C672,128,768,128,864,149.3C960,171,1056,213,1152,218.7C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'/%3E%3C/svg%3E") !important;
}