/**
 * 統一全域 CSS 變數系統
 * UI/UX Pro Max - Vibrant & Block-based E-commerce Style
 * Font: Rubik (heading) + Nunito Sans (body)
 *
 * @package Uni_Shopee_Affiliate_TW
 * @since 2.0.0
 * @author Edwin Lin
 * @website https://unicornws.com
 */

:root {
    /* === 品牌色彩 (Shopee 橘 + E-commerce 綠) === */
    --uni-brand-shopee: #EE4D2D;
    --uni-brand-shopee-dark: #D4381A;
    --uni-brand-shopee-light: rgba(238, 77, 45, 0.08);

    /* === 主要色彩 (E-commerce Vibrant) === */
    --uni-primary-gradient: linear-gradient(135deg, #EE4D2D 0%, #F97316 100%);
    --uni-primary-color: #EE4D2D;
    --uni-primary-dark: #D4381A;
    --uni-primary-light: rgba(238, 77, 45, 0.08);
    --uni-secondary-color: #F97316;
    --uni-secondary-dark: #EA580C;

    /* === CTA 色彩 === */
    --uni-cta-color: #F97316;
    --uni-cta-gradient: linear-gradient(135deg, #EE4D2D 0%, #F97316 100%);
    --uni-cta-hover: linear-gradient(135deg, #D4381A 0%, #EA580C 100%);

    /* === 功能性色彩 === */
    --uni-success-color: #059669;
    --uni-success-light: #ECFDF5;
    --uni-success-dark: #047857;
    --uni-success-gradient: linear-gradient(135deg, #059669, #10B981);

    --uni-warning-color: #D97706;
    --uni-warning-light: #FFFBEB;
    --uni-warning-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

    --uni-error-color: #DC2626;
    --uni-error-light: #FEF2F2;
    --uni-error-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    --uni-info-color: #0284C7;
    --uni-info-light: #F0F9FF;
    --uni-info-gradient: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);

    /* === 中性色彩 === */
    --uni-white: #ffffff;
    --uni-black: #000000;
    --uni-gray-50: #FAFAF9;
    --uni-gray-100: #F5F5F4;
    --uni-gray-200: #E7E5E4;
    --uni-gray-300: #D6D3D1;
    --uni-gray-400: #A8A29E;
    --uni-gray-500: #78716C;
    --uni-gray-600: #57534E;
    --uni-gray-700: #44403C;
    --uni-gray-800: #292524;
    --uni-gray-900: #1C1917;

    /* === 文字色彩 === */
    --uni-text-primary: #1C1917;
    --uni-text-secondary: #57534E;
    --uni-text-muted: #78716C;
    --uni-text-light: #A8A29E;
    --uni-text-white: #ffffff;

    /* === 背景色彩 === */
    --uni-bg-primary: #ffffff;
    --uni-bg-secondary: #FAFAF9;
    --uni-bg-light: #F5F5F4;
    --uni-bg-dark: #1C1917;
    --uni-bg-warm: #FFF7ED;

    /* === 邊框色彩 === */
    --uni-border-light: #E7E5E4;
    --uni-border-medium: #D6D3D1;
    --uni-border-dark: #A8A29E;
    --uni-border-primary: var(--uni-primary-color);

    /* === 陰影效果 === */
    --uni-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
    --uni-shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -2px rgba(28, 25, 23, 0.05);
    --uni-shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
    --uni-shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.08), 0 8px 10px -6px rgba(28, 25, 23, 0.04);
    --uni-shadow-2xl: 0 25px 50px -12px rgba(28, 25, 23, 0.15);
    --uni-shadow-primary: 0 4px 14px rgba(238, 77, 45, 0.25);
    --uni-shadow-primary-lg: 0 8px 25px rgba(238, 77, 45, 0.3);

    /* === Glassmorphism === */
    --uni-glass-bg: rgba(255, 255, 255, 0.72);
    --uni-glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --uni-glass-blur: blur(16px);
    --uni-glass-shadow: 0 8px 32px rgba(28, 25, 23, 0.08);

    /* === 圓角半徑 === */
    --uni-radius-sm: 6px;
    --uni-radius-md: 8px;
    --uni-radius-lg: 12px;
    --uni-radius-xl: 16px;
    --uni-radius-2xl: 20px;
    --uni-radius-full: 9999px;

    /* === 間距系統 (8px base) === */
    --uni-space-xs: 4px;
    --uni-space-sm: 8px;
    --uni-space-md: 12px;
    --uni-space-lg: 16px;
    --uni-space-xl: 20px;
    --uni-space-2xl: 24px;
    --uni-space-3xl: 32px;
    --uni-space-4xl: 40px;
    --uni-space-5xl: 48px;

    /* === 字體系統 (Rubik + Nunito Sans) === */
    --uni-font-heading: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --uni-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --uni-font-family: var(--uni-font-body);
    --uni-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    --uni-font-size-xs: 11px;
    --uni-font-size-sm: 12px;
    --uni-font-size-base: 14px;
    --uni-font-size-md: 16px;
    --uni-font-size-lg: 18px;
    --uni-font-size-xl: 20px;
    --uni-font-size-2xl: 24px;
    --uni-font-size-3xl: 30px;
    --uni-font-size-4xl: 36px;

    --uni-font-weight-light: 300;
    --uni-font-weight-normal: 400;
    --uni-font-weight-medium: 500;
    --uni-font-weight-semibold: 600;
    --uni-font-weight-bold: 700;
    --uni-font-weight-extrabold: 800;

    --uni-line-height-tight: 1.25;
    --uni-line-height-normal: 1.5;
    --uni-line-height-relaxed: 1.625;
    --uni-line-height-loose: 1.75;

    /* === 轉場動畫 === */
    --uni-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --uni-transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --uni-transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --uni-transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Z-index 層級 === */
    --uni-z-dropdown: 1000;
    --uni-z-sticky: 1020;
    --uni-z-fixed: 1030;
    --uni-z-modal-backdrop: 1040;
    --uni-z-modal: 1050;
    --uni-z-popover: 1060;
    --uni-z-tooltip: 1070;
    --uni-z-notification: 9999;

    /* === 按鈕高度 === */
    --uni-button-height-sm: 32px;
    --uni-button-height-md: 38px;
    --uni-button-height-lg: 44px;
    --uni-button-height-xl: 50px;

    /* === 表單元素 === */
    --uni-input-height: 44px;
    --uni-input-padding: 0 var(--uni-space-lg);
    --uni-input-border: 1.5px solid var(--uni-border-light);
    --uni-input-border-focus: 1.5px solid var(--uni-primary-color);
    --uni-input-radius: var(--uni-radius-lg);

    /* === 卡片樣式 === */
    --uni-card-bg: var(--uni-white);
    --uni-card-border: 1px solid var(--uni-border-light);
    --uni-card-radius: var(--uni-radius-xl);
    --uni-card-shadow: var(--uni-shadow-md);
    --uni-card-padding: var(--uni-space-3xl);

    /* === 頁面標題區域 === */
    --uni-header-bg: var(--uni-primary-gradient);
    --uni-header-color: var(--uni-text-white);
    --uni-header-padding: var(--uni-space-4xl) var(--uni-space-3xl);
    --uni-header-radius: var(--uni-radius-2xl);
    --uni-header-shadow: var(--uni-shadow-xl);

    /* === 統計卡片漸層 (E-commerce Palette) === */
    --uni-stat-gradient-1: linear-gradient(135deg, #EE4D2D 0%, #F97316 100%);
    --uni-stat-gradient-2: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --uni-stat-gradient-3: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
    --uni-stat-gradient-4: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);

    /* === 切換開關 === */
    --uni-toggle-width: 52px;
    --uni-toggle-height: 28px;
    --uni-toggle-bg-off: var(--uni-gray-300);
    --uni-toggle-bg-on: var(--uni-success-color);
    --uni-toggle-slider-size: 22px;

    /* === 響應式斷點 === */
    --uni-breakpoint-sm: 576px;
    --uni-breakpoint-md: 768px;
    --uni-breakpoint-lg: 992px;
    --uni-breakpoint-xl: 1200px;
    --uni-breakpoint-2xl: 1400px;
}

/* === 全域字體套用 === */
.uni-shopee-admin-wrap,
.uni-shopee-admin-wrap *,
.shopee-smart-products,
.shopee-smart-products *,
.shopee-product,
.shopee-product *,
.shopee-products,
.shopee-products * {
    font-family: var(--uni-font-body);
}

.uni-shopee-admin-wrap h1,
.uni-shopee-admin-wrap h2,
.uni-shopee-admin-wrap h3,
.uni-shopee-admin-wrap h4,
.uni-shopee-admin-wrap h5,
.uni-shopee-admin-wrap h6,
.page-title,
.uni-shopee-header h1,
.shopee-products-title {
    font-family: var(--uni-font-heading);
}

/* === 通用工具類別 === */
.uni-gradient-primary {
    background: var(--uni-primary-gradient);
}

.uni-text-primary {
    color: var(--uni-primary-color);
}

.uni-text-white {
    color: var(--uni-text-white);
}

.uni-shadow-primary {
    box-shadow: var(--uni-shadow-primary);
}

.uni-transition {
    transition: var(--uni-transition-normal);
}

.uni-radius-lg {
    border-radius: var(--uni-radius-lg);
}

.uni-radius-xl {
    border-radius: var(--uni-radius-xl);
}

/* === Glassmorphism 工具 === */
.uni-glass {
    background: var(--uni-glass-bg);
    backdrop-filter: var(--uni-glass-blur);
    -webkit-backdrop-filter: var(--uni-glass-blur);
    border: var(--uni-glass-border);
    box-shadow: var(--uni-glass-shadow);
}

/* === 響應式工具 === */
@media (max-width: 768px) {
    :root {
        --uni-space-3xl: 24px;
        --uni-space-4xl: 32px;
        --uni-space-5xl: 40px;
        --uni-font-size-3xl: 24px;
        --uni-font-size-4xl: 30px;
    }
}

@media (max-width: 480px) {
    :root {
        --uni-space-3xl: 20px;
        --uni-space-4xl: 28px;
        --uni-space-5xl: 36px;
        --uni-font-size-3xl: 22px;
        --uni-font-size-4xl: 26px;
    }
}