/**
 * =====================================================
 * 可爱漫画风 UI - OKLCH 色彩变量系统
 * 圆润字体 + 粗描边 + 硬阴影 + 速度线/网点/闪光
 * =====================================================
 */

:root {

  /* ========================================
     主色系 — 明亮柔和
     ======================================== */
  --comic-primary: oklch(0.624 0.184 269);
  --comic-primary-light: oklch(0.737 0.135 271.1);
  --comic-primary-dark: oklch(0.522 0.196 268.7);

  --comic-secondary: oklch(0.781 0.142 357.6);
  --comic-secondary-light: oklch(0.856 0.089 353.7);
  --comic-secondary-dark: oklch(0.666 0.182 0);

  --comic-accent: oklch(0.787 0.142 54.6);
  --comic-accent-light: oklch(0.851 0.101 60.5);
  --comic-accent-dark: oklch(0.694 0.155 47.3);

  --comic-accent-mint: oklch(0.797 0.137 162.3);
  --comic-accent-yellow: oklch(0.879 0.144 87.8);
  --comic-accent-pink: oklch(0.781 0.142 357.6);
  --comic-accent-purple: oklch(0.670 0.174 292.9);

  /* 淡雅卡片底色（kawaii 漫画风专用） */
  --comic-accent-light-pink: oklch(0.969 0.018 351.1);
  --comic-accent-light-blue: oklch(0.967 0.015 270);
  --comic-accent-light-mint: oklch(0.987 0.019 163);
  --comic-accent-light-yellow: oklch(0.988 0.026 99.9);
  --comic-accent-light-purple: oklch(0.963 0.021 301.1);

  /* 预定义常用透明度 */
  --comic-primary-soft: oklch(0.624 0.184 269 / 0.15);
  --comic-primary-medium: oklch(0.624 0.184 269 / 0.3);
  --comic-primary-strong: oklch(0.624 0.184 269 / 0.6);
  --comic-secondary-soft: oklch(0.781 0.142 357.6 / 0.15);
  --comic-secondary-medium: oklch(0.781 0.142 357.6 / 0.3);
  --comic-glass: oklch(1 0 0 / 0.7);
  --comic-glass-heavy: oklch(1 0 0 / 0.85);
  --comic-glass-light: oklch(1 0 0 / 0.5);
  --comic-overlay: oklch(0.236 0.031 275.6 / 0.5);

  /* ========================================
     状态色
     ======================================== */
  --comic-success: oklch(0.797 0.137 162.3);
  --comic-success-light: oklch(0.869 0.109 165);
  --comic-success-dark: oklch(0.701 0.135 160.6);

  --comic-warning: oklch(0.879 0.144 87.8);
  --comic-warning-light: oklch(0.922 0.114 93.2);
  --comic-warning-dark: oklch(0.805 0.145 86.5);

  --comic-error: oklch(0.712 0.181 22.8);
  --comic-error-light: oklch(0.800 0.115 19.9);
  --comic-error-dark: oklch(0.636 0.192 24.4);

  --comic-info: oklch(0.670 0.174 292.9);
  --comic-info-light: oklch(0.771 0.129 293.2);
  --comic-info-dark: oklch(0.565 0.185 291);

  /* ========================================
     中性色
     ======================================== */
  --comic-black: oklch(0.236 0.031 275.6);
  --comic-gray-900: oklch(0.316 0.048 280);
  --comic-gray-800: oklch(0.387 0.073 280.4);
  --comic-gray-700: oklch(0.435 0.047 276.4);
  --comic-gray-600: oklch(0.602 0.043 277.1);
  --comic-gray-500: oklch(0.727 0.038 276.8);
  --comic-gray-400: oklch(0.844 0.021 276.9);
  --comic-gray-300: oklch(0.894 0.021 276.9);
  --comic-gray-200: oklch(0.941 0.014 272.7);
  --comic-gray-100: oklch(0.961 0.008 271.3);
  --comic-gray-50: oklch(0.982 0.004 271.4);
  --comic-white: oklch(1 0 0);

  /* ========================================
     支付品牌色
     ======================================== */
  --comic-pay-wechat: oklch(0.710 0.189 151.2);
  --comic-pay-wechat-dark: oklch(0.655 0.174 151.3);
  --comic-pay-alipay: oklch(0.599 0.219 259);
  --comic-pay-alipay-light: oklch(0.672 0.153 239.5);

  /* ========================================
     玻璃拟物风
     ======================================== */
  --comic-glass-indigo: oklch(0.585 0.204 277.1);
  --comic-glass-pink: oklch(0.656 0.212 354.3);
  --comic-glass-sky: oklch(0.745 0.118 236.5);
  --comic-glass-violet: oklch(0.670 0.174 292.9);
  --comic-glass-surface: oklch(1 0 0 / 0.72);
  --comic-glass-surface-strong: oklch(1 0 0 / 0.55);
  --comic-glass-surface-soft: oklch(1 0 0 / 0.45);
  --comic-glass-border: oklch(1 0 0 / 0.55);
  --comic-glass-border-soft: oklch(1 0 0 / 0.45);
  --comic-glass-highlight: oklch(1 0 0 / 0.75);
  --comic-glass-shadow: oklch(0.338 0.158 271.3 / 0.12);
  --comic-glass-text: oklch(0.236 0.031 275.6 / 0.92);
  --comic-glass-text-muted: oklch(0.236 0.031 275.6 / 0.68);
  --comic-glass-text-soft: oklch(0.236 0.031 275.6 / 0.45);
  --comic-glass-light-border: oklch(1 0 0 / 0.5);
  --comic-glass-dark: oklch(0.236 0.031 275.6 / 0.7);
  --comic-glass-dark-border: oklch(1 0 0 / 0.1);

  /* ========================================
     背景色
     ======================================== */
  --comic-bg-primary: oklch(0.982 0.004 271.4);
  --comic-bg-secondary: oklch(0.961 0.008 271.3);
  --comic-bg-tertiary: oklch(0.941 0.014 272.7);
  --comic-bg-overlay: oklch(0.982 0.004 271.4 / 0.95);

  /* ========================================
     渐变色彩
     ======================================== */
  --comic-gradient-primary: linear-gradient(135deg, oklch(0.624 0.184 269) 0%, oklch(0.737 0.135 271.1) 100%);
  --comic-gradient-hover: linear-gradient(135deg, oklch(0.522 0.196 268.7) 0%, oklch(0.624 0.184 269) 100%);
  --comic-gradient-secondary: linear-gradient(135deg, oklch(0.781 0.142 357.6) 0%, oklch(0.856 0.089 353.7) 100%);
  --comic-gradient-accent: linear-gradient(135deg, oklch(0.787 0.142 54.6) 0%, oklch(0.851 0.101 60.5) 100%);
  --comic-gradient-rainbow: linear-gradient(135deg, oklch(0.712 0.181 22.8) 0%, oklch(0.781 0.142 357.6) 20%, oklch(0.670 0.174 292.9) 40%, oklch(0.624 0.184 269) 60%, oklch(0.797 0.137 162.3) 80%, oklch(0.879 0.144 87.8) 100%);
  --comic-gradient-sunrise: linear-gradient(135deg, oklch(0.787 0.142 54.6) 0%, oklch(0.781 0.142 357.6) 50%, oklch(0.670 0.174 292.9) 100%);
  --comic-gradient-ocean: linear-gradient(135deg, oklch(0.624 0.184 269) 0%, oklch(0.813 0.111 195.2) 100%);
  --comic-gradient-sakura: linear-gradient(135deg, oklch(0.781 0.142 357.6) 0%, oklch(0.856 0.089 353.7) 50%, oklch(0.943 0.032 355.5) 100%);
  --comic-gradient-starry: linear-gradient(135deg, oklch(0.236 0.031 275.6) 0%, oklch(0.316 0.048 280) 50%, oklch(0.387 0.073 280.4) 100%);
  --comic-gradient-crystal: linear-gradient(135deg, oklch(1 0 0 / 0.9) 0%, oklch(1 0 0 / 0.6) 100%);
  --comic-gradient-pay-wechat: linear-gradient(135deg, var(--comic-pay-wechat) 0%, var(--comic-pay-wechat-dark) 100%);
  --comic-gradient-pay-alipay: linear-gradient(135deg, var(--comic-pay-alipay) 0%, var(--comic-pay-alipay-light) 100%);
  --comic-gradient-glass-badge: linear-gradient(135deg, oklch(0.585 0.204 277.1 / 0.92) 0%, oklch(0.670 0.174 292.9 / 0.92) 100%);
  --comic-gradient-glass-badge-password: linear-gradient(135deg, oklch(0.656 0.212 354.3 / 0.92) 0%, oklch(0.670 0.174 292.9 / 0.92) 100%);

  /* ========================================
     描边系统
     ======================================== */
  --comic-border: 3px solid var(--comic-black);
  --comic-border-thin: 2px solid var(--comic-black);
  --comic-border-thick: 4px solid var(--comic-black);
  --comic-border-primary: 3px solid var(--comic-primary);
  --comic-border-secondary: 3px solid var(--comic-secondary);
  --comic-border-accent: 3px solid var(--comic-accent);
  --comic-border-light: 1px solid var(--comic-gray-200);
  --comic-border-medium: 1px solid var(--comic-gray-300);

  /* ========================================
     阴影系统
     ======================================== */
  --comic-shadow-sm: 2px 2px 0 var(--comic-black), 3px 3px 6px oklch(0 0 0 / 0.1);
  --comic-shadow-md: 4px 4px 0 var(--comic-black), 6px 6px 12px oklch(0 0 0 / 0.1);
  --comic-shadow-lg: 6px 6px 0 var(--comic-black), 8px 8px 16px oklch(0 0 0 / 0.12);
  --comic-shadow-xl: 8px 8px 0 var(--comic-black), 10px 10px 20px oklch(0 0 0 / 0.15);
  --comic-shadow-hover: 6px 6px 0 var(--comic-black), 8px 8px 16px oklch(0 0 0 / 0.12);
  --comic-shadow-active: 1px 1px 0 var(--comic-black), 2px 2px 4px oklch(0 0 0 / 0.08);
  --comic-shadow-float: 0 20px 60px oklch(0.624 0.184 269 / 0.25), 0 10px 20px oklch(0 0 0 / 0.1);
  --comic-shadow-glow: 0 0 20px oklch(0.624 0.184 269 / 0.4), 0 0 40px oklch(0.624 0.184 269 / 0.2);
  --comic-shadow-glow-pink: 0 0 20px oklch(0.781 0.142 357.6 / 0.4), 0 0 40px oklch(0.781 0.142 357.6 / 0.2);
  --comic-shadow-card: 0 4px 20px oklch(0 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.05), inset 0 1px 0 oklch(1 0 0 / 0.6);
  --comic-shadow-pay-wechat: 0 6px 20px oklch(0.710 0.189 151.2 / 0.32);
  --comic-shadow-pay-alipay: 0 6px 20px oklch(0.599 0.219 259 / 0.28);

  /* ========================================
     圆角系统
     ======================================== */
  --comic-radius-sm: 8px;
  --comic-radius-md: 12px;
  --comic-radius-lg: 16px;
  --comic-radius-xl: 24px;
  --comic-radius-full: 9999px;
  --comic-radius-bubble: 24px 24px 24px 4px;
  --comic-radius-card: 20px;

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

  /* ========================================
     字体系统
     ======================================== */
  --comic-font-primary: 'Nunito', 'Quicksand', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --comic-font-heading: 'Quicksand', 'Nunito', -apple-system, sans-serif;
  --comic-font-comic: 'Comic Neue', 'Comic Sans MS', cursive;
  --comic-font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  --comic-text-xs: 12px;
  --comic-text-sm: 14px;
  --comic-text-base: 16px;
  --comic-text-lg: 18px;
  --comic-text-xl: 20px;
  --comic-text-2xl: 24px;
  --comic-text-3xl: 30px;
  --comic-text-4xl: 36px;
  --comic-text-5xl: 48px;

  --comic-weight-normal: 400;
  --comic-weight-medium: 500;
  --comic-weight-semibold: 600;
  --comic-weight-bold: 700;
  --comic-weight-comic: 800;
  --comic-weight-black: 900;

  --comic-line-tight: 1.15;
  --comic-line-normal: 1.5;
  --comic-line-relaxed: 1.75;

  /* ========================================
     动画系统
     ======================================== */
  --comic-transition-fast: 150ms;
  --comic-transition-base: 250ms;
  --comic-transition-slow: 350ms;
  --comic-transition-slower: 500ms;

  --comic-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --comic-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --comic-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --comic-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --comic-animate-offset: 30px;
  --comic-animate-offset-lg: 50px;
  --comic-animate-duration: 0.6s;
  --comic-animate-duration-fast: 0.4s;
  --comic-animate-duration-slow: 0.8s;
  --comic-animate-stagger: 0.1s;

  /* ========================================
     布局尺寸
     ======================================== */
  --comic-container-sm: 640px;
  --comic-container-md: 768px;
  --comic-container-lg: 1024px;
  --comic-container-xl: 1280px;
  --comic-container-2xl: 1536px;
  --comic-navbar-height: 72px;
  --comic-content-max-width: 1200px;

  /* ========================================
     装饰
     ======================================== */
  --comic-star-color: var(--comic-warning);
  --comic-sparkle-gradient: radial-gradient(circle, oklch(1 0 0 / 0.8) 0%, transparent 70%);

  /* ========================================
     Z-index 层级
     ======================================== */
  --comic-z-dropdown: 1000;
  --comic-z-sticky: 1020;
  --comic-z-fixed: 1030;
  --comic-z-modal: 1050;
  --comic-z-tooltip: 1070;
}

/* ========================================
   暗色模式（预留）
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --comic-bg-primary: oklch(0.236 0.031 275.6);
    --comic-bg-secondary: oklch(0.316 0.048 280);
    --comic-bg-tertiary: oklch(0.387 0.073 280.4);
    --comic-gray-50: oklch(0.236 0.031 275.6);
    --comic-gray-100: oklch(0.316 0.048 280);
    --comic-gray-200: oklch(0.387 0.073 280.4);
    --comic-black: oklch(0.982 0.004 271.4);
    --comic-white: oklch(0.236 0.031 275.6);
    --comic-border: 3px solid oklch(0.982 0.004 271.4);
    --comic-border-thin: 2px solid oklch(0.982 0.004 271.4);
    --comic-border-thick: 4px solid oklch(0.982 0.004 271.4);
    --comic-shadow-sm: 2px 2px 0 oklch(0.982 0.004 271.4), 3px 3px 6px oklch(0 0 0 / 0.3);
    --comic-shadow-md: 4px 4px 0 oklch(0.982 0.004 271.4), 6px 6px 12px oklch(0 0 0 / 0.3);
    --comic-shadow-lg: 6px 6px 0 oklch(0.982 0.004 271.4), 8px 8px 16px oklch(0 0 0 / 0.35);
  }
}