/* =====================================================================
   VISAIRA FASHION — Design Tokens
   Single source of truth for colors, typography, spacing, shadows,
   motion. Matches the Phase 3 Design System exactly — every component
   style in app.css references these variables, never a raw hex value.
   ===================================================================== */

:root {
  /* Colors — Primary (Gold + Black/Charcoal) */
  --color-primary: #1A1A1A;
  --color-primary-hover: #2E2E2E;
  --color-accent-gold: #C9A227;
  --color-accent-gold-soft: #E8C873;
  --color-bg-cream: #F5F0E8;
  --color-bg-white: #FFFFFF;

  /* Colors — Signature accent (used sparingly) */
  --color-rose-pink: #E88DAE;
  --color-rose-pink-soft: #F5A3BE;

  /* Colors — Secondary / neutral */
  --color-accent-rose-gold: #D99A6C;
  --color-pearl: #F7F4F1;
  --color-champagne: #EFE1C6;

  /* Colors — Text & borders */
  --color-text-primary: #1A1A1A;
  --color-text-muted: #6E6E6E;
  --color-text-gold: #C9A227;
  --color-text-inverse: #FFFFFF;
  --color-border: #E7E1D6;
  --color-border-strong: #1A1A1A;

  /* Colors — Functional */
  --color-success: #4C8B6A;
  --color-warning: #C9902E;
  --color-danger: #B85C5C;
  --color-info: #6E8CA0;

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --font-alt: 'Inter', sans-serif;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 16px;
  --space-4: 24px; --space-5: 32px;  --space-6: 48px;
  --space-7: 64px; --space-8: 96px;  --space-9: 128px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.06);
  --shadow-md: 0 6px 16px rgba(26,26,26,0.08);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.14);
  --shadow-gold: 0 4px 14px rgba(201,162,39,0.3);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}