/**
 * Theme Variables - 主题变量系统
 * 统一管理整个网站的主题色调和样式
 *
 * @package     block-canvas Child
 * @subpackage  Assets
 * @author      JoshuaWang2019
 * @version     1.0.0
 * @since       2025-06-29
 */

:root {
  /* ==========================================================================
       主题色彩系统 - 可通过修改这些变量来快速更换主题
       ========================================================================== */

  /* 主色调 - 绿色系 */
  --theme-primary: #48bb78;
  --theme-primary-dark: #38a169;
  --theme-primary-light: #68d391;
  --theme-primary-lighter: #9ae6b4;
  --theme-primary-lightest: #c6f6d5;

  /* 次要色调 */
  --theme-secondary: #4299e1;
  --theme-secondary-dark: #3182ce;
  --theme-secondary-light: #63b3ed;

  /* 中性色调 */
  --theme-gray-50: #f8fafc;
  --theme-gray-100: #f1f5f9;
  --theme-gray-200: #e2e8f0;
  --theme-gray-300: #cbd5e0;
  --theme-gray-400: #a0aec0;
  --theme-gray-500: #718096;
  --theme-gray-600: #4a5568;
  --theme-gray-700: #2d3748;
  --theme-gray-800: #1a202c;
  --theme-gray-900: #171923;

  /* 状态色 */
  --theme-success: #48bb78;
  --theme-warning: #ed8936;
  --theme-error: #f56565;
  --theme-info: #4299e1;

  /* ==========================================================================
       渐变色系统
       ========================================================================== */
  --theme-gradient-primary: linear-gradient(
    135deg,
    var(--theme-primary) 0%,
    var(--theme-primary-dark) 100%
  );
  --theme-gradient-secondary: linear-gradient(
    135deg,
    var(--theme-secondary) 0%,
    var(--theme-secondary-dark) 100%
  );
  --theme-gradient-success: linear-gradient(
    135deg,
    var(--theme-success) 0%,
    #38a169 100%
  );
  /* 页面背景 - 浅色模式使用纯白色 */
  --theme-gradient-background: #ffffff;
  --theme-gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

  /* 高亮渐变 */
  --theme-gradient-highlight: linear-gradient(
    120deg,
    var(--theme-primary-lightest) 0%,
    var(--theme-primary-lighter) 100%
  );

  /* ==========================================================================
       按钮系统
       ========================================================================== */
  --btn-primary-bg: var(--theme-gradient-primary);
  --btn-primary-color: #ffffff;
  --btn-primary-hover-shadow: 0 8px 25px rgba(72, 187, 120, 0.3);
  --btn-primary-hover-transform: translateY(-2px);

  --btn-secondary-bg: var(--theme-gradient-secondary);
  --btn-secondary-color: #ffffff;
  --btn-secondary-hover-shadow: 0 8px 25px rgba(66, 153, 225, 0.3);

  --btn-outline-border: 2px solid var(--theme-primary);
  --btn-outline-color: var(--theme-primary);
  --btn-outline-hover-bg: var(--theme-primary);
  --btn-outline-hover-color: #ffffff;

  /* ==========================================================================
       输入框系统
       ========================================================================== */
  --input-border: 2px solid var(--theme-gray-200);
  --input-border-focus: 2px solid var(--theme-primary);
  --input-bg: var(--theme-gray-50);
  --input-bg-focus: #ffffff;
  --input-shadow-focus: 0 0 0 3px rgba(72, 187, 120, 0.1);
  --input-placeholder-color: var(--theme-gray-400);

  /* ==========================================================================
       卡片系统
       ========================================================================== */
  --card-bg: #ffffff;
  --card-border: 1px solid rgba(255, 255, 255, 0.2);
  --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.15);
  --card-radius: 16px;
  --card-radius-small: 12px;
  --card-hover-transform: translateY(-8px);

  /* ==========================================================================
       统一卡片布局系统
       ========================================================================== */
  --card-grid-columns: repeat(
    auto-fill,
    minmax(280px, 1fr)
  ); /* 统一的网格列设置 */
  --card-grid-gap: var(--spacing-md); /* 统一的网格间距 */
  --card-content-padding: var(--spacing-md); /* 统一的卡片内容内边距 */
  --card-title-margin: var(--spacing-sm); /* 统一的标题底部间距 */
  --card-meta-margin: var(--spacing-sm); /* 统一的元数据底部间距 */

  /* ==========================================================================
       间距系统
       ========================================================================== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* ==========================================================================
       字体系统
       ========================================================================== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ==========================================================================
       过渡动画
       ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ==========================================================================
       边框半径和阴影系统
       ========================================================================== */
  --border-radius: 16px;
  --border-radius-sm: 8px;
  --border-radius-lg: 24px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* ==========================================================================
       主题渐变变量补充
       ========================================================================== */
  --theme-gradient-light: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --theme-primary-50: rgba(72, 187, 120, 0.05);
  --theme-primary-100: rgba(72, 187, 120, 0.1);
  --theme-primary-200: rgba(72, 187, 120, 0.2);
  --theme-primary-300: rgba(72, 187, 120, 0.3);

  /* ==========================================================================
       断点系统（用于媒体查询参考）
       ========================================================================== */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;

  /* ==========================================================================
       图片比例系统 (基于 900x383px 标准)
       ========================================================================== */
  --image-aspect-ratio: 42.56%; /* 383/900 = 0.4256 = 42.56% */
  --image-standard-width: 900px;
  --image-standard-height: 383px;
}

/* ==========================================================================
   暗色主题变量（可选）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* 深色模式灰度系统 - 翻转颜色 */
    --theme-gray-50: #1a202c;
    --theme-gray-100: #2d3748;
    --theme-gray-200: #4a5568;
    --theme-gray-300: #718096;
    --theme-gray-400: #a0aec0;
    --theme-gray-500: #cbd5e0;
    --theme-gray-600: #e2e8f0;
    --theme-gray-700: #f1f5f9;
    --theme-gray-800: #f8fafc;
    --theme-gray-900: #ffffff;

    /* 深色模式背景 - 使用深灰色而非纯黑，更柔和舒适 */
    --theme-gradient-background: #0f172a; /* 深蓝灰色，类似Tailwind的slate-900 */

    /* 卡片背景 - 比页面背景稍亮，形成层次 */
    --card-bg: #1e293b; /* slate-800，与背景有明显区分 */

    /* 输入框背景 */
    --input-bg: #334155; /* slate-700 */
    --input-bg-focus: #1e293b; /* 聚焦时与卡片同色 */

    /* 卡片边框 - 使用半透明白色，更有质感 */
    --card-border: 1px solid rgba(255, 255, 255, 0.1);

    /* 卡片阴影 - 深色模式下使用更深的阴影 */
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.6);
  }
}

/* ==========================================================================
   主题切换类（JavaScript控制）
   ========================================================================== */

/* 蓝色主题 */
.theme-blue {
  --theme-primary: #4299e1;
  --theme-primary-dark: #3182ce;
  --theme-primary-light: #63b3ed;
  --theme-primary-lighter: #90cdf4;
  --theme-primary-lightest: #bee3f8;
}

/* 紫色主题 */
.theme-purple {
  --theme-primary: #9f7aea;
  --theme-primary-dark: #805ad5;
  --theme-primary-light: #b794f6;
  --theme-primary-lighter: #d6bcfa;
  --theme-primary-lightest: #e9d8fd;
}

/* 橙色主题 */
.theme-orange {
  --theme-primary: #ed8936;
  --theme-primary-dark: #dd6b20;
  --theme-primary-light: #f6ad55;
  --theme-primary-lighter: #fbb040;
  --theme-primary-lightest: #feebc8;
}

/* 红色主题 */
.theme-red {
  --theme-primary: #f56565;
  --theme-primary-dark: #e53e3e;
  --theme-primary-light: #fc8181;
  --theme-primary-lighter: #feb2b2;
  --theme-primary-lightest: #fed7d7;
}

/* ==========================================================================
   工具类
   ========================================================================== */

/* 快速应用主题色 */
.text-primary {
  color: var(--theme-primary) !important;
}
.text-primary-dark {
  color: var(--theme-primary-dark) !important;
}
.bg-primary {
  background: var(--theme-primary) !important;
}
.bg-primary-gradient {
  background: var(--theme-gradient-primary) !important;
}
.border-primary {
  border-color: var(--theme-primary) !important;
}

/* 状态色 */
.text-success {
  color: var(--theme-success) !important;
}
.text-warning {
  color: var(--theme-warning) !important;
}
.text-error {
  color: var(--theme-error) !important;
}
.text-info {
  color: var(--theme-info) !important;
}