/* ============================================================
   川渝生活网 - 全局CSS变量系统
   设计灵感：川渝文化 - 火锅红、辣椒红、花椒紫、竹绿、熊猫色
   参考：宁德社区现代化设计系统
   ============================================================ */

:root {
    /* ========== 品牌色 - 川渝火锅红 ========== */
    --cy-primary: #c41e3a;
    --cy-primary-dark: #a01830;
    --cy-primary-light: #e8445a;
    --cy-primary-bg: #fdf0f2;
    --cy-primary-50: #fff5f6;
    --cy-primary-100: #fce8eb;
    --cy-primary-200: #f8c4cb;
    --cy-primary-300: #f39da7;
    --cy-primary-400: #ed7683;
    --cy-primary-500: #c41e3a;
    --cy-primary-600: #a01830;
    --cy-primary-700: #7d1326;
    --cy-primary-800: #5a0e1c;
    --cy-primary-900: #370912;

    /* ========== 辅助色 ========== */
    --cy-chili: #e74c3c;          /* 辣椒红 */
    --cy-chili-dark: #c0392b;
    --cy-chili-bg: #fef2f2;

    --cy-pepper: #8e44ad;         /* 花椒紫 */
    --cy-pepper-dark: #7b2d8b;
    --cy-pepper-bg: #f5e6f8;

    --cy-bamboo: #27ae60;         /* 竹绿 */
    --cy-bamboo-dark: #1e8449;
    --cy-bamboo-bg: #e8f8f0;

    --cy-gold: #d4a017;           /* 金椒黄 */
    --cy-gold-dark: #b8860b;
    --cy-gold-bg: #fef9e7;

    --cy-orange: #ff6b35;         /* 火锅橙 */
    --cy-orange-dark: #e55a2b;
    --cy-orange-bg: #fff3ed;

    /* ========== 语义色 ========== */
    --cy-success: #27ae60;
    --cy-success-dark: #1e8449;
    --cy-success-bg: #e8f8f0;

    --cy-warning: #f59f00;
    --cy-warning-dark: #d97706;
    --cy-warning-bg: #fffbeb;

    --cy-danger: #e03131;
    --cy-danger-dark: #c92a2a;
    --cy-danger-bg: #fef2f2;

    --cy-info: #1c7ed6;
    --cy-info-dark: #1565c0;
    --cy-info-bg: #e7f5ff;

    /* ========== 熊猫色 ========== */
    --cy-panda-black: #2c3e50;
    --cy-panda-white: #ecf0f1;
    --cy-panda-gray: #95a5a6;

    /* ========== 中性色 ========== */
    --cy-gray-50: #f8f9fa;
    --cy-gray-100: #f1f3f5;
    --cy-gray-200: #e9ecef;
    --cy-gray-300: #dee2e6;
    --cy-gray-400: #ced4da;
    --cy-gray-500: #adb5bd;
    --cy-gray-600: #868e96;
    --cy-gray-700: #495057;
    --cy-gray-800: #343a40;
    --cy-gray-900: #212529;

    /* ========== 文字色 ========== */
    --cy-text-primary: #212529;
    --cy-text-secondary: #495057;
    --cy-text-muted: #868e96;
    --cy-text-inverse: #ffffff;
    --cy-text-link: var(--cy-primary);
    --cy-text-link-hover: var(--cy-primary-dark);

    /* ========== 背景色 ========== */
    --cy-bg-page: #f5f6f8;
    --cy-bg-card: #ffffff;
    --cy-bg-hover: #f8f9fa;
    --cy-bg-active: var(--cy-primary-50);
    --cy-bg-overlay: rgba(0, 0, 0, 0.5);

    /* ========== 边框 ========== */
    --cy-border: #dee2e6;
    --cy-border-light: #e9ecef;
    --cy-border-dark: #ced4da;
    --cy-border-radius: 8px;
    --cy-border-radius-sm: 4px;
    --cy-border-radius-md: 8px;
    --cy-border-radius-lg: 12px;
    --cy-border-radius-xl: 16px;
    --cy-border-radius-2xl: 20px;
    --cy-border-radius-full: 9999px;

    /* ========== 阴影 ========== */
    --cy-shadow-xs: 0 1px 2px rgba(196, 30, 58, 0.04);
    --cy-shadow-sm: 0 1px 3px rgba(196, 30, 58, 0.08), 0 1px 2px rgba(196, 30, 58, 0.04);
    --cy-shadow: 0 4px 6px rgba(196, 30, 58, 0.06), 0 2px 4px rgba(196, 30, 58, 0.04);
    --cy-shadow-md: 0 10px 15px rgba(196, 30, 58, 0.08), 0 4px 6px rgba(196, 30, 58, 0.04);
    --cy-shadow-lg: 0 20px 25px rgba(196, 30, 58, 0.1), 0 10px 10px rgba(196, 30, 58, 0.04);
    --cy-shadow-xl: 0 25px 50px rgba(196, 30, 58, 0.15);
    --cy-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --cy-shadow-none: none;
    --cy-shadow-primary: 0 4px 14px rgba(196, 30, 58, 0.25);

    /* ========== 间距 ========== */
    --cy-space-0: 0;
    --cy-space-1: 4px;
    --cy-space-2: 8px;
    --cy-space-3: 12px;
    --cy-space-4: 16px;
    --cy-space-5: 20px;
    --cy-space-6: 24px;
    --cy-space-8: 32px;
    --cy-space-10: 40px;
    --cy-space-12: 48px;
    --cy-space-16: 64px;
    --cy-space-20: 80px;
    --cy-space-24: 96px;

    /* ========== 字体 ========== */
    --cy-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cy-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Consolas, "Courier New", monospace;
    --cy-font-size-xs: 12px;
    --cy-font-size-sm: 13px;
    --cy-font-size-base: 14px;
    --cy-font-size-md: 15px;
    --cy-font-size-lg: 16px;
    --cy-font-size-xl: 18px;
    --cy-font-size-2xl: 20px;
    --cy-font-size-3xl: 24px;
    --cy-font-size-4xl: 30px;
    --cy-font-size-5xl: 36px;

    --cy-font-normal: 400;
    --cy-font-medium: 500;
    --cy-font-semibold: 600;
    --cy-font-bold: 700;
    --cy-font-extrabold: 800;

    --cy-line-height-none: 1;
    --cy-line-height-tight: 1.25;
    --cy-line-height-snug: 1.375;
    --cy-line-height-normal: 1.5;
    --cy-line-height-relaxed: 1.625;
    --cy-line-height-loose: 2;

    /* ========== 容器 ========== */
    --cy-container-sm: 640px;
    --cy-container-md: 768px;
    --cy-container-lg: 1024px;
    --cy-container-xl: 1200px;
    --cy-container-2xl: 1400px;

    /* ========== 过渡 ========== */
    --cy-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --cy-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --cy-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --cy-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========== Z-index ========== */
    --cy-z-dropdown: 100;
    --cy-z-sticky: 200;
    --cy-z-fixed: 300;
    --cy-z-overlay: 400;
    --cy-z-modal-backdrop: 500;
    --cy-z-modal: 600;
    --cy-z-popover: 700;
    --cy-z-tooltip: 800;
    --cy-z-toast: 900;
}

/* ========== 暗黑模式 ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --cy-text-primary: #f8f9fa;
        --cy-text-secondary: #dee2e6;
        --cy-text-muted: #adb5bd;
        --cy-text-inverse: #212529;
        --cy-bg-page: #1a1a2e;
        --cy-bg-card: #16213e;
        --cy-bg-hover: #1f2b47;
        --cy-bg-active: #2a1a2e;
        --cy-border: #2d3748;
        --cy-border-light: #1f2b47;
        --cy-border-dark: #4a5568;
        --cy-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
        --cy-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
        --cy-primary-bg: #2a1a2e;
        --cy-success-bg: #064e3b;
        --cy-warning-bg: #78350f;
        --cy-danger-bg: #7f1d1d;
        --cy-info-bg: #164e63;
    }
}