/* =========================================================
   CLARKEN — GLOBAL DESIGN TOKENS (CSS Custom Properties)
   
   These tokens define the global design system:
   - Colors (brand, neutral, semantic)
   - Spacing (scale-based)
   - Typography
   - Layout
   - Shadows
   - Z-index layers
   - Transitions
   
   All components reference these tokens for consistency.
========================================================= */

:root {
  /* ========================================
     BRAND COLORS
     ======================================== */
  --lp-color-black: #111111;
  --lp-color-white: #ffffff;
  --lp-color-accent: #111111; /* Can be overridden for accent brand color */

  /* ========================================
     NEUTRAL COLORS
     ======================================== */
  --lp-color-text: #111111;
  --lp-color-muted: rgba(0, 0, 0, 0.55);
  --lp-color-muted-light: rgba(0, 0, 0, 0.35);
  --lp-color-border: rgba(0, 0, 0, 0.08);
  --lp-color-border-light: rgba(0, 0, 0, 0.04);
  --lp-color-bg-muted: rgba(0, 0, 0, 0.04);
  --lp-color-bg-overlay: rgba(0, 0, 0, 0.6);

  /* ========================================
     SEMANTIC COLORS
     ======================================== */
  --lp-color-success: #10b981;
  --lp-color-warning: #f59e0b;
  --lp-color-error: #ef4444;
  --lp-color-info: #3b82f6;

  /* ========================================
     SPACING SCALE (4px base unit)
     ======================================== */
  --lp-space-xs: 4px;
  --lp-space-sm: 8px;
  --lp-space-md: 12px;
  --lp-space-lg: 16px;
  --lp-space-xl: 24px;
  --lp-space-2xl: 32px;
  --lp-space-3xl: 48px;
  --lp-space-4xl: 64px;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --lp-radius-sm: 6px;
  --lp-radius-md: 12px;
  --lp-radius-lg: 16px;
  --lp-radius-xl: 20px;
  --lp-radius-pill: 999px;

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --lp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --lp-font-mono: 'Courier New', monospace;
  
  --lp-text-xs: 12px;
  --lp-text-sm: 13px;
  --lp-text-base: 14px;
  --lp-text-lg: 16px;
  --lp-text-xl: 18px;
  --lp-text-2xl: 20px;
  --lp-text-3xl: 24px;
  --lp-text-4xl: 32px;
  --lp-text-5xl: 40px;
  --lp-text-6xl: 48px;

  /* ========================================
     SHADOWS
     ======================================== */
  --lp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --lp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --lp-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1);
  --lp-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */
  --lp-z-dropdown: 1000;
  --lp-z-header: 999;
  --lp-z-cart-header: 999;
  --lp-z-sticky: 950;
  --lp-z-modal: 1100;
  --lp-z-toast: 10000;

  /* ========================================
     LAYOUT
     ======================================== */
  --lp-container-max: 1300px;
  --lp-container-padding: clamp(20px, 4vw, 56px);
  --lp-container-padding-mobile: 14px;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --lp-transition-fast: 160ms ease;
  --lp-transition-base: 240ms ease;
  --lp-transition-slow: 320ms ease;

  /* ========================================
     Shorthand Aliases for Cart Component
     (Backward compatibility)
     ======================================== */
  --lp-text: var(--lp-color-text);
  --lp-muted: var(--lp-color-muted);
  --lp-border: var(--lp-color-border);
  --lp-muted-bg: var(--lp-color-bg-muted);
}