/**
 * Laifen CSS 变量系统
 *
 * 从 Shopify 主题迁移的品牌色彩和设计系统
 *
 * @package Laifen_Russia
 * @since 1.0.0
 */

/* ==========================================================================
   全局 Box Sizing
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   品牌主色调
   ========================================================================== */
:root {
    /* 主色调 - Laifen 品牌蓝 */
    --laifen-primary: #54cdcd;
    --laifen-primary-hover: #3db5b5;
    --laifen-primary-light: #e0f7f7;
    --laifen-primary-dark: #2a9d9d;

    /* 次要色 */
    --laifen-secondary: #151515;
    --laifen-secondary-hover: #000000;
    --laifen-secondary-light: #8a8a8a;

    /* 强调色 */
    --laifen-accent: #54cdcd;
    --laifen-accent-hover: #3db5b5;

    /* 文字色 */
    --laifen-text-primary: #151515;
    --laifen-text-secondary: #8a8a8a;
    --laifen-text-muted: #cacaca;
    --laifen-text-white: #ffffff;
    --laifen-text-black: #000000;

    /* 背景色 */
    --laifen-bg-white: #ffffff;
    --laifen-bg-light: #f8f9fa;
    --laifen-bg-gray: #e6e6e6;
    --laifen-bg-dark: #151515;
    --laifen-bg-black: #000000;

    /* 边框色 */
    --laifen-border-light: #e6e6e6;
    --laifen-border-gray: #cacaca;
    --laifen-border-dark: #8a8a8a;

    /* 状态色 */
    --laifen-success: #28a745;
    --laifen-success-light: #d4edda;
    --laifen-danger: #dc3545;
    --laifen-danger-light: #f8d7da;
    --laifen-warning: #ffc107;
    --laifen-warning-light: #fff3cd;
    --laifen-info: #17a2b8;
    --laifen-info-light: #d1ecf1;
}

/* ==========================================================================
   间距系统
   ========================================================================== */
:root {
    --laifen-spacing-xs: 0.5rem;    /* 8px */
    --laifen-spacing-sm: 1rem;      /* 16px */
    --laifen-spacing-md: 1.5rem;    /* 24px */
    --laifen-spacing-lg: 2rem;      /* 32px */
    --laifen-spacing-xl: 3rem;      /* 48px */
    --laifen-spacing-2xl: 4rem;     /* 64px */
    --laifen-spacing-3xl: 6rem;     /* 96px */
}

/* ==========================================================================
   字体系统
   ========================================================================== */
:root {
    /* 字体族 */
    --laifen-font-primary: 'MiSans Latin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --laifen-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* 字体大小 */
    --laifen-font-xs: 0.75rem;      /* 12px */
    --laifen-font-sm: 0.875rem;     /* 14px */
    --laifen-font-base: 1rem;       /* 16px */
    --laifen-font-lg: 1.125rem;     /* 18px */
    --laifen-font-xl: 1.25rem;      /* 20px */
    --laifen-font-2xl: 1.5rem;      /* 24px */
    --laifen-font-3xl: 1.875rem;    /* 30px */
    --laifen-font-4xl: 2.25rem;     /* 36px */
    --laifen-font-5xl: 3rem;        /* 48px */

    /* 字重 */
    --laifen-font-light: 300;
    --laifen-font-regular: 400;
    --laifen-font-medium: 500;
    --laifen-font-semibold: 600;
    --laifen-font-bold: 700;

    /* 行高 */
    --laifen-line-height-tight: 1.25;
    --laifen-line-height-normal: 1.5;
    --laifen-line-height-relaxed: 1.75;
}

/* ==========================================================================
   圆角系统
   ========================================================================== */
:root {
    --laifen-radius-none: 0;
    --laifen-radius-sm: 0.25rem;    /* 4px */
    --laifen-radius-md: 0.5rem;     /* 8px */
    --laifen-radius-lg: 1rem;       /* 16px */
    --laifen-radius-xl: 1.5rem;     /* 24px */
    --laifen-radius-full: 9999px;   /* 完全圆角 */
}

/* ==========================================================================
   阴影系统
   ========================================================================== */
:root {
    --laifen-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --laifen-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --laifen-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --laifen-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --laifen-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   过渡动画
   ========================================================================== */
:root {
    --laifen-transition-fast: 150ms ease-in-out;
    --laifen-transition-base: 300ms ease-in-out;
    --laifen-transition-slow: 500ms ease-in-out;
}

/* ==========================================================================
   容器和布局
   ========================================================================== */
:root {
    --laifen-container-sm: 640px;
    --laifen-container-md: 768px;
    --laifen-container-lg: 1024px;
    --laifen-container-xl: 1280px;
    --laifen-container-2xl: 1536px;
}

/* ==========================================================================
   Z-index 层级
   ========================================================================== */
:root {
    --laifen-z-dropdown: 1000;
    --laifen-z-sticky: 1020;
    --laifen-z-fixed: 1030;
    --laifen-z-modal-backdrop: 1040;
    --laifen-z-modal: 1050;
    --laifen-z-popover: 1060;
    --laifen-z-tooltip: 1070;
}

/* ==========================================================================
   响应式断点
   ========================================================================== */
:root {
    --laifen-breakpoint-xs: 0;
    --laifen-breakpoint-sm: 576px;
    --laifen-breakpoint-md: 768px;
    --laifen-breakpoint-lg: 1024px;
    --laifen-breakpoint-xl: 1280px;
    --laifen-breakpoint-2xl: 1536px;
}