/**
 * VietAZ Core - CSS Variables
 * Base design tokens for the plugin
 * 
 * @package VietAZ_Core
 * @version 1.0.0
 */

:root {
  /* ==========================================================================
     Color Tokens - Map to theme variables with fallbacks
     ========================================================================== */

  /* Primary Colors */
  --vz-primary: var(--vx-primary, #2563eb);
  --vz-primary-hover: var(--vx-primary-dark, #1d4ed8);
  --vz-primary-soft: var(--vx-primary-muted, #eff4ff);

  /* Semantic Colors */
  --vz-success: var(--vx-success, #16a34a);
  --vz-warning: var(--vx-warning, #f59e0b);
  --vz-danger: var(--vx-danger, #ef4444);
  --vz-info: var(--vz-sky-500, #0ea5e9);

  /* Accent Colors */
  --vz-purple: #667eea;
  --vz-pink: #f5576c;
  --vz-orange: #f76b1c;

  /* ==========================================================================
     Background Colors
     ========================================================================== */
  --vz-bg-page: var(--vx-bg, #f5f6f8);
  --vz-bg-card: var(--vx-surface, #ffffff);
  --vz-bg-panel: var(--vx-surface-sub, #f9fafb);
  --vz-bg-muted: #f3f4f6;

  /* ==========================================================================
     Text Colors
     ========================================================================== */
  --vz-text-primary: var(--vx-text, #111827);
  --vz-text-secondary: var(--vx-text-soft, #6b7280);
  --vz-text-muted: var(--vx-text-mute, #9ca3af);

  /* ==========================================================================
     Border Colors
     ========================================================================== */
  --vz-border: var(--vx-border, #e5e7eb);
  --vz-border-light: var(--vx-border-soft, #edf0f4);

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --vz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vz-shadow: var(--vx-shadow-card, 0 10px 30px rgba(15, 23, 42, 0.04));
  --vz-shadow-md: var(--vx-shadow-soft, 0 18px 45px rgba(15, 23, 42, 0.06));
  --vz-shadow-lg: 0 22px 60px rgba(15, 23, 42, 0.08);
  --vz-shadow-primary: 0 10px 25px
    rgba(var(--vz-sky-200-rgb, 186, 230, 253), 0.35);

  /* ==========================================================================
     Border Radius
     ========================================================================== */
  --vz-radius-sm: var(--vx-radius-sm, 6px);
  --vz-radius: var(--vx-radius-md, 10px);
  --vz-radius-lg: var(--vx-radius-lg, 16px);
  --vz-radius-xl: 20px;
  --vz-radius-full: 999px;

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --vz-space-xs: 4px;
  --vz-space-sm: 8px;
  --vz-space-md: 12px;
  --vz-space-lg: 16px;
  --vz-space-xl: 24px;
  --vz-space-2xl: 32px;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --vz-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, sans-serif;
  --vz-font-size-xs: 11px;
  --vz-font-size-sm: 13px;
  --vz-font-size-base: 14px;
  --vz-font-size-lg: 16px;
  --vz-font-size-xl: 18px;
  --vz-font-size-2xl: 24px;
  --vz-font-size-3xl: 28px;

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --vz-transition-fast: 0.15s ease;
  --vz-transition: 0.2s ease;
  --vz-transition-slow: 0.3s ease;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --vz-z-dropdown: 100;
  --vz-z-sticky: 200;
  --vz-z-overlay: 500;
  --vz-z-modal: 1000;
  --vz-z-toast: 1100;
}