/* ============================================================
   OMNI COMMERCE — Design System Variables & Tokens
   ============================================================ */

:root, html[data-theme="dark"] {
  /* ── Dark Theme Colors (Default) ────────────────────────── */
  --bg-base:              #0F172A;
  --bg-surface:           #1E293B;
  --bg-surface-1:         #1E293B;
  --bg-surface-2:         #334155;
  --bg-surface-3:         #475569;
  --bg-card:              #1E293B;
  --bg-header:            rgba(15, 23, 42, 0.85);
  --bg-sidebar:           #0F172A;
  --bg-warm:              #1E293B;
  --bg-ivory:             #1E293B;
  --bg-overlay:           rgba(0, 0, 0, 0.7);

  --color-white:          #FFFFFF;
  --text-primary:         #F8FAFC;
  --text-secondary:       #CBD5E1;
  --text-muted:           #94A3B8;
  --text-inverse:         #0F172A;

  --border-color:         rgba(255, 255, 255, 0.12);
  --border-color-light:   rgba(255, 255, 255, 0.06);
  --border-color-dark:    rgba(255, 255, 255, 0.2);

  /* ── Brand & Accent Palette ────────────────────────────── */
  --color-primary:        #6366F1;
  --color-primary-light:  #818CF8;
  --color-primary-dark:   #4F46E5;
  --color-primary-glow:   rgba(99, 102, 241, 0.2);

  --color-secondary:      #8B5CF6;
  --color-accent:         #C48B9F;
  --color-accent-soft:    rgba(196, 139, 159, 0.18);
  --color-accent-gold:    #F59E0B;

  /* ── Status Colors ────────────────────────────────────── */
  --color-success:        #10B981;
  --color-success-soft:   rgba(16, 185, 129, 0.18);
  --color-warning:        #F59E0B;
  --color-warning-soft:   rgba(245, 158, 11, 0.18);
  --color-danger:         #EF4444;
  --color-danger-soft:    rgba(239, 68, 68, 0.18);
  --color-info:           #3B82F6;
  --color-info-soft:      rgba(59, 130, 246, 0.18);

  /* ── Shadows & Gradients ──────────────────────────────── */
  --gradient-hero:        linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --gradient-primary:     linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);

  --shadow-card:          0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-hover:         0 16px 36px rgba(0, 0, 0, 0.45);
  --shadow-nav:           0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] {
  /* ── Light Theme Palette ───────────────────────────────── */
  --bg-base:              #F8FAFC;
  --bg-surface:           #FFFFFF;
  --bg-surface-1:         #FFFFFF;
  --bg-surface-2:         #F1F5F9;
  --bg-surface-3:         #E2E8F0;
  --bg-card:              #FFFFFF;
  --bg-header:            rgba(255, 255, 255, 0.9);
  --bg-sidebar:           #FFFFFF;
  --bg-warm:              #F8FAFC;
  --bg-ivory:             #F5F4F1;
  --bg-overlay:           rgba(15, 23, 42, 0.4);

  --text-primary:         #0F172A;
  --text-secondary:       #475569;
  --text-muted:           #94A3B8;
  --text-inverse:         #FFFFFF;

  --border-color:         #E2E8F0;
  --border-color-light:   #F1F5F9;
  --border-color-dark:    #CBD5E1;

  --color-primary:        #4F46E5;
  --color-primary-light:  #6366F1;
  --color-primary-dark:   #4338CA;
  --color-primary-glow:   rgba(79, 70, 229, 0.12);

  --shadow-card:          0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-hover:         0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-nav:           0 2px 10px rgba(0, 0, 0, 0.04);
}

:root {
  /* ── Typography Scale & Fonts ─────────────────────────── */
  --font-serif:    'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      1.875rem;   /* 30px */
  --text-4xl:      2.25rem;    /* 36px */
  --text-5xl:      3rem;       /* 48px */

  --text-micro:    12px;
  --text-caption:  14px;
  --text-body:     16px;
  --text-card:     20px;
  --text-section:  32px;
  --text-heading:  48px;
  --text-hero:     64px;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  /* ── Spacing System ───────────────────────────────────── */
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-120: 120px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-full:   9999px;
  --radius-btn:    6px;
  --radius-card:   12px;
  --radius-round:  50%;
  --radius-pill:   9999px;

  /* ── Motion & Transitions ─────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout Defaults ──────────────────────────────────── */
  --max-width-screen:  1440px;
  --max-width-content: 1280px;
  --nav-height:        80px;
}