/* ZevStore — Design Tokens & Core Variables (Ecommerce Light Palette, WCAG AA Verified) */
:root {
  /* Brand Colors */
  --zs-purple: #7C3AED;
  --zs-purple-hover: #6D28D9;
  --zs-purple-active: #5B21B6;
  --zs-lavender: #8B5CF6;
  --zs-lavender-subtle: #F3E8FF;
  --zs-purple-glow: rgba(124, 58, 237, 0.12);

  /* Surfaces & Backgrounds */
  --zs-bg: #F8F9FA;
  --zs-deep: #0F172A;
  --zs-surface-1: #FFFFFF;
  --zs-surface-2: #F1F5F9;
  --zs-surface-3: #E2E8F0;
  --zs-surface-elevated: #FFFFFF;
  --zs-glass-bg: rgba(255, 255, 255, 0.92);

  /* Typography Colors — WCAG 2.1 AA >= 4.5:1 against #FFFFFF and #F1F5F9 */
  --zs-soft-white: #FFFFFF;
  --zs-text-primary: #0F172A;
  --zs-text-secondary: #334155;
  --zs-text-muted: #475569;
  --zs-text-dim: #64748B;

  /* Borders & Dividers */
  --zs-border-subtle: #E2E8F0;
  --zs-border-strong: #CBD5E1;
  --zs-border-focus: #7C3AED;

  /* Semantic Feedback — WCAG 2.1 AA >= 4.5:1 against tinted badge backgrounds */
  --zs-success: #047857;
  --zs-success-bg: #ECFDF5;
  --zs-warning: #B45309;
  --zs-warning-bg: #FFFBEB;
  --zs-error: #B91C1C;
  --zs-error-bg: #FEF2F2;
  --zs-info: #0369A1;
  --zs-info-bg: #F0F9FF;

  /* Typography Scale */
  --zs-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --zs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

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

  /* Spacing Scale */
  --zs-sp-1: 0.25rem;  /* 4px */
  --zs-sp-2: 0.5rem;   /* 8px */
  --zs-sp-3: 0.75rem;   /* 12px */
  --zs-sp-4: 1rem;     /* 16px */
  --zs-sp-5: 1.25rem;  /* 20px */
  --zs-sp-6: 1.5rem;   /* 24px */
  --zs-sp-8: 2rem;     /* 32px */
  --zs-sp-10: 2.5rem;  /* 40px */
  --zs-sp-12: 3rem;    /* 48px */
  --zs-sp-16: 4rem;    /* 64px */

  /* Border Radii (Modest, Restrained) */
  --zs-radius-sm: 6px;
  --zs-radius-md: 10px;
  --zs-radius-lg: 14px;
  --zs-radius-xl: 18px;
  --zs-radius-full: 9999px;

  /* Shadows (Subtle, Clean) */
  --zs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --zs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --zs-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --zs-shadow-purple: 0 4px 14px rgba(124, 58, 237, 0.2);

  /* Motion Specifications */
  --zs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --zs-dur-fast: 150ms;
  --zs-dur-base: 220ms;
  --zs-dur-slow: 350ms;

  /* Max Widths */
  --zs-max-width: 1280px;
  --zs-header-height: 64px;
}