/* =========================================================
   00-vars.css — BeautyTrouvailles Design Tokens
   Version: 3.0 — Complete Token System
   
   Architecture:
   - Primitive tokens (raw values)
   - Semantic tokens (contextual meaning)
   - Component tokens (specific use cases)
   ========================================================= */

.bt-custom-product-page {
  /* =========================
     COLOR PRIMITIVES
     ========================= */
  --bt-pink-50: #fdf2f6;
  --bt-pink-100: #fce7ef;
  --bt-pink-200: #fbd0e1;
  --bt-pink-300: #f9a8c7;
  --bt-pink-400: #f472a3;
  --bt-pink-500: #D4145A;
  --bt-pink-600: #c91254;
  --bt-pink-700: #a90f46;
  --bt-pink-800: #8c103c;
  --bt-pink-900: #761236;
  
  --bt-navy-50: #f5f5f7;
  --bt-navy-100: #e8e8ed;
  --bt-navy-200: #d4d4dd;
  --bt-navy-300: #b5b5c4;
  --bt-navy-400: #9090a5;
  --bt-navy-500: #6b7280;
  --bt-navy-600: #4b4b5c;
  --bt-navy-700: #3a3a4a;
  --bt-navy-800: #2a2a3a;
  --bt-navy-900: #1a1a2e;
  
  --bt-green-50: #ecfdf5;
  --bt-green-100: #d1fae5;
  --bt-green-200: #a7f3d0;
  --bt-green-300: #6ee7b7;
  --bt-green-400: #34d399;
  --bt-green-500: #10b981;
  --bt-green-600: #059669;
  --bt-green-700: #047857;
  --bt-green-800: #065f46;
  --bt-green-900: #064e3b;
  
  --bt-amber-400: #fbbf24;
  --bt-amber-500: #f59e0b;
  
  --bt-red-500: #ef4444;
  --bt-red-600: #dc2626;
  --bt-red-700: #b91c1c;

  /* =========================
     SEMANTIC COLOR TOKENS
     ========================= */
  --bt-pink: var(--bt-pink-500);
  --bt-pink-2: #FF4FA3;
  --bt-pink-glow: rgba(212, 20, 90, 0.22);
  --bt-pink-subtle: rgba(212, 20, 90, 0.10);
  --bt-pink-border: rgba(212, 20, 90, 0.18);
  
  --bt-navy: var(--bt-navy-900);
  --bt-text: #111827;
  --bt-text-secondary: var(--bt-navy-500);
  --bt-muted: #6b7280;
  
  --bt-bg: #ffffff;
  --bt-bg-soft: #f7f7fb;
  --bt-bg-card: #ffffff;
  
  --bt-border: rgba(17, 24, 39, 0.10);
  --bt-border-strong: rgba(17, 24, 39, 0.15);
  
  --bt-success: var(--bt-green-600);
  --bt-success-bg: rgba(16, 185, 129, 0.10);
  --bt-success-border: rgba(16, 185, 129, 0.22);
  
  --bt-warning: #d97706;
  --bt-error: var(--bt-red-600);

  /* =========================
     SPACING SCALE (8px base)
     ========================= */
  --bt-space-1: 4px;
  --bt-space-2: 8px;
  --bt-space-3: 12px;
  --bt-space-4: 16px;
  --bt-space-5: 20px;
  --bt-space-6: 24px;
  --bt-space-8: 32px;
  --bt-space-10: 40px;
  --bt-space-12: 48px;
  --bt-space-16: 64px;

  /* =========================
     TYPOGRAPHY
     ========================= */
  --bt-font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bt-font-title: "DM Serif Display", Georgia, serif;
  
  --bt-text-xs: 12px;
  --bt-text-sm: 13px;
  --bt-text-base: 14px;
  --bt-text-md: 15px;
  --bt-text-lg: 16px;
  --bt-text-xl: 18px;
  --bt-text-2xl: 22px;
  --bt-text-3xl: 28px;
  --bt-text-4xl: 34px;
  
  --bt-leading-none: 1;
  --bt-leading-tight: 1.15;
  --bt-leading-snug: 1.25;
  --bt-leading-normal: 1.5;
  --bt-leading-relaxed: 1.75;

  /* =========================
     BORDER RADIUS
     ========================= */
  --bt-radius-sm: 8px;
  --bt-radius-md: 12px;
  --bt-radius-lg: 16px;
  --bt-radius-xl: 18px;
  --bt-radius-2xl: 22px;
  --bt-radius-full: 999px;

  /* =========================
     SHADOWS
     ========================= */
  --bt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --bt-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --bt-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.08);
  --bt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.10);
  --bt-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);
  
  --bt-shadow-pink: 0 16px 32px var(--bt-pink-glow);
  --bt-shadow-pink-lg: 0 20px 40px var(--bt-pink-glow);
  
  --bt-shadow-card: 0 6px 16px rgba(0, 0, 0, 0.06);
  --bt-shadow-card-hover: 0 14px 36px rgba(0, 0, 0, 0.10);

  /* =========================
     Z-INDEX SCALE
     ========================= */
  --bt-z-base: 1;
  --bt-z-dropdown: 10;
  --bt-z-sticky: 100;
  --bt-z-fixed: 1000;
  --bt-z-modal-backdrop: 9000;
  --bt-z-modal: 9999;
  --bt-z-tooltip: 10000;

  /* =========================
     TRANSITIONS
     ========================= */
  --bt-duration-fast: 150ms;
  --bt-duration-base: 220ms;
  --bt-duration-slow: 350ms;
  --bt-duration-slower: 500ms;
  
  --bt-ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);
  --bt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --bt-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --bt-transition-fast: var(--bt-duration-fast) var(--bt-ease-out);
  --bt-transition-base: var(--bt-duration-base) var(--bt-ease-out);
  --bt-transition-slow: var(--bt-duration-slow) var(--bt-ease-out);

  /* =========================
     LAYOUT
     ========================= */
  --bt-container: 1200px;
  --bt-container-pad: clamp(16px, 4vw, 24px);
  --bt-section-pad: clamp(20px, 4vw, 40px);
  --bt-gap-sm: var(--bt-space-3);
  --bt-gap-md: var(--bt-space-4);
  --bt-gap-lg: clamp(20px, 4vw, 56px);

  /* =========================
     COMPONENT TOKENS
     ========================= */
  --bt-card-padding: var(--bt-space-4);
  --bt-card-radius: var(--bt-radius-2xl);
  --bt-card-border: 1px solid var(--bt-border);
  
  --bt-btn-height: 48px;
  --bt-btn-height-lg: 56px;
  --bt-btn-radius: var(--bt-radius-full);
  --bt-btn-padding: var(--bt-space-3) var(--bt-space-4);
  
  --bt-input-height: 44px;
  --bt-input-radius: var(--bt-radius-full);
  --bt-input-border: 1px solid var(--bt-border);
}

/* =========================
   DARK MODE SUPPORT (future)
   ========================= */
@media (prefers-color-scheme: dark) {
  .bt-custom-product-page[data-theme="auto"] {
    /* Dark tokens here when needed */
  }
}