/* ================================================
   ACERO SHOP V2 - DESIGN TOKENS / VARIABLES
   ================================================
   This file defines all CSS custom properties
   used throughout the marketplace.
   Mobile First. Shopee-style Design System.
   ================================================ */

:root {
  /* ============================================
     COLOR SYSTEM
     ============================================ */

  /* Primary Colors */
  --color-primary: #00B894;
  --color-primary-dark: #009E7F;
  --color-primary-light: #55EFC4;

  /* Semantic Colors */
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-danger: #E74C3C;
  --color-info: #3498DB;

  /* Neutral Colors */
  --color-background: #FFFFFF;
  --color-card-background: #FFFFFF;
  --color-border: #EAEAEA;
  --color-divider: #F5F5F5;

  /* Text Colors */
  --color-text-primary: #222222;
  --color-text-secondary: #777777;
  --color-text-muted: #999999;
  --color-text-white: #FFFFFF;

  /* Overlay & Shadow Colors */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-shadow-light: rgba(0, 0, 0, 0.08);
  --color-shadow-medium: rgba(0, 0, 0, 0.12);
  --color-shadow-hover: rgba(0, 0, 0, 0.18);

  /* Badge Colors */
  --color-badge-flash: #E74C3C;
  --color-badge-verified: #00B894;
  --color-badge-topseller: #F39C12;
  --color-badge-bestseller: #FF6B6B;
  --color-badge-lowstock: #E74C3C;
  --color-badge-new: #3498DB;

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  --font-family-primary: 'Inter', Arial, sans-serif;
  --font-family-fallback: Arial, sans-serif;

  /* Font Sizes */
  --font-size-hero: 32px;
  --font-size-section-title: 24px;
  --font-size-card-title: 14px;
  --font-size-price: 18px;
  --font-size-description: 13px;
  --font-size-button: 14px;
  --font-size-small: 11px;
  --font-size-caption: 12px;
  --font-size-body: 15px;
  --font-size-heading-1: 28px;
  --font-size-heading-2: 22px;
  --font-size-heading-3: 18px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ============================================
     SPACING SYSTEM
     ============================================ */

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* Section Spacing */
  --section-padding-y: 32px;
  --section-padding-x: 16px;
  --content-max-width: 1280px;

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-card: 12px;
  --radius-button: 10px;
  --radius-input: 10px;
  --radius-modal: 16px;
  --radius-badge: 6px;
  --radius-small: 4px;
  --radius-full: 50%;

  /* ============================================
     SHADOW SYSTEM
     ============================================ */

  --shadow-light: 0 1px 3px var(--color-shadow-light);
  --shadow-medium: 0 2px 8px var(--color-shadow-medium);
  --shadow-hover: 0 4px 16px var(--color-shadow-hover);
  --shadow-card: 0 1px 4px var(--color-shadow-light);
  --shadow-elevated: 0 8px 24px var(--color-shadow-medium);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */

  --z-index-base: 0;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-header: 300;
  --z-index-overlay: 400;
  --z-index-modal: 500;
  --z-index-toast: 600;
  --z-index-tooltip: 700;

  /* ============================================
     LAYOUT
     ============================================ */

  --header-height: 56px;
  --bottom-nav-height: 56px;
  --sidebar-width: 260px;
  --product-grid-gap: 8px;
  --product-grid-gap-tablet: 12px;
  --product-grid-gap-desktop: 16px;

  /* ============================================
     TRANSITIONS
     ============================================ */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ============================================
     BREAKPOINTS (Reference Only)
     ============================================ */

  /* 320px  - Small Mobile */
  /* 480px  - Large Mobile */
  /* 768px  - Tablet */
  /* 1024px - Small Desktop */
  /* 1280px - Desktop */
  /* 1440px - Large Desktop */

  /* ============================================
     STATUS COLORS
     ============================================ */

  --color-status-active: #2ECC71;
  --color-status-inactive: #999999;
  --color-status-pending: #F39C12;
  --color-status-suspended: #E74C3C;
  --color-status-expired: #E74C3C;
  --color-status-completed: #2ECC71;
  --color-status-cancelled: #999999;
  --color-status-processing: #3498DB;
  --color-status-shipped: #00B894;

  /* ============================================
     SELLER SUBSCRIPTION COLORS
     ============================================ */

  --color-subscription-active: #2ECC71;
  --color-subscription-expiring: #F39C12;
  --color-subscription-expired: #E74C3C;
  --color-subscription-pending: #3498DB;
}