/**
 * MARDOX CAPITAL — Theme Settings
 * ================================
 * Change these CSS custom properties to update the entire site's color scheme.
 * All pages and components reference these variables.
 */

:root {
  /* ─── Primary Brand Color ───────────────────────────── */
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-dark: #3730A3;
  --color-primary-light: #EEF2FF;
  --color-primary-soft: rgba(79, 70, 229, 0.06);
  --color-primary-10: rgba(79, 70, 229, 0.10);
  --color-primary-15: rgba(79, 70, 229, 0.15);

  /* ─── Secondary / Accent Colors ────────────────────── */
  --color-secondary: #06B6D4;
  --color-secondary-dark: #0891B2;
  --color-secondary-light: #ECFEFF;
  --color-accent: #F59E0B;
  --color-accent-light: #FEF3C7;
  --color-obsidian: #0A0A0B;
  --color-obsidian-light: #1A1A1C;

  /* ─── Background Colors ────────────────────────────── */
  --color-bg: #F8FAFC;
  --color-bg-alt: #F1F5F9;
  --color-bg-dark: #0F172A;
  --color-card: #FFFFFF;
  --color-card-hover: #FAFBFF;

  /* ─── Text Colors ──────────────────────────────────── */
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-text-on-dark: #F8FAFC;
  --color-text-on-primary: #FFFFFF;

  /* ─── Semantic Colors ──────────────────────────────── */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* ─── Borders & Dividers ───────────────────────────── */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-focus: var(--color-primary);

  /* ─── Shadow System ────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(15, 23, 42, 0.04);

  /* ─── Gradients ────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-cta: linear-gradient(135deg, #0A0A0B 0%, #171719 100%);
  --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);

  /* ─── Typography ───────────────────────────────────── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ─── Spacing Scale ────────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ─── Border Radius ────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ─── Transitions ──────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ─── Layout ───────────────────────────────────────── */
  --container-max: 1200px;
  --container-narrow: 800px;
  --nav-height: 72px;
}


/* ─── Dark Theme Overrides ───────────────────────────── */
[data-theme="dark"] {
  /* Primary — slightly lighter for dark bg contrast */
  --color-primary: #6366F1;
  --color-primary-hover: #818CF8;
  --color-primary-dark: #4F46E5;
  --color-primary-light: rgba(99, 102, 241, 0.15);
  --color-primary-soft: rgba(99, 102, 241, 0.08);
  --color-primary-10: rgba(99, 102, 241, 0.12);
  --color-primary-15: rgba(99, 102, 241, 0.18);

  /* Secondary / Accent */
  --color-secondary: #22D3EE;
  --color-secondary-dark: #06B6D4;
  --color-secondary-light: rgba(34, 211, 238, 0.12);
  --color-accent: #FBBF24;
  --color-accent-light: rgba(251, 191, 36, 0.12);

  /* Backgrounds */
  --color-bg: #0B0F1A;
  --color-bg-alt: #111827;
  --color-bg-dark: #060A12;
  --color-card: #1A1F2E;
  --color-card-hover: #1E2435;

  /* Text */
  --color-text: #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-text-on-dark: #F8FAFC;
  --color-text-on-primary: #FFFFFF;

  /* Semantic */
  --color-success: #34D399;
  --color-success-light: rgba(52, 211, 153, 0.12);

  /* Borders */
  --color-border: rgba(148, 163, 184, 0.12);
  --color-border-light: rgba(148, 163, 184, 0.06);

  /* Shadows — darker, more subtle */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);

  /* Gradients — dark versions */
  --gradient-hero: linear-gradient(135deg, #0B0F1A 0%, #111827 100%);
  --gradient-cta: linear-gradient(135deg, #6366F1 0%, #7C3AED 100%);
  --gradient-dark: linear-gradient(135deg, #060A12 0%, #0B0F1A 100%);
}

/* Smooth theme transition */
body,
.nav,
.footer,
.journey__card,
.why__card,
.faq__item,
.testimonial__card,
.accel__timeline,
.contact-form,
.value-card {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}