/* ========== Personal Blog - 双主题共存方案 ========== */
/* 主题1: Neobrutalism (访客端默认) */
/* 主题2: Preline Admin (管理后台) */

/* 基础 Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================ */
/* CSS 变量定义 */
/* ============================================ */

:root {
  /* Neobrutalism 默认配色 */
  --brutal-cream: #FEF9E7;
  --brutal-yellow: #FFDE59;
  --brutal-pink: #FF6B9D;
  --brutal-cyan: #00D9FF;
  --brutal-lavender: #C084FC;
  --brutal-green: #4ADE80;

  /* 动态主题变量（默认 Preline 配色，会被后端配置覆盖） */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-secondary: #06B6D4;
  --color-sidebar: #1E293B;
  --color-sidebar-active: #334155;
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text: #0F172A;
  --color-text-secondary: #64748B;

  /* Primary 色阶 (50-950) */
  --color-primary-50: #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;
  --color-primary-950: #172554;

  /* Secondary 色阶 (50-950) */
  --color-secondary-50: #ECFEFF;
  --color-secondary-100: #CFFAFE;
  --color-secondary-200: #A5F3FC;
  --color-secondary-300: #67E8F9;
  --color-secondary-400: #22D3EE;
  --color-secondary-500: #06B6D4;
  --color-secondary-600: #0891B2;
  --color-secondary-700: #0E7490;
  --color-secondary-800: #155E75;
  --color-secondary-900: #164E63;
  --color-secondary-950: #083344;

  /* Gray 色阶 (50-950) */
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  --color-gray-950: #020617;

  /* Semantic colors */
  --color-success: #22C55E;
  --color-success-bg: #DCFCE7;
  --color-success-border: #BBF7D0;
  --color-success-text: #14532D;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FDE68A;
  --color-warning-text: #78350F;
  --color-danger: #EF4444;
  --color-danger-bg: #FEE2E2;
  --color-danger-border: #FECACA;
  --color-danger-text: #7F1D1D;
  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;
  --color-info-border: #BFDBFE;
  --color-info-text: #1E3A8A;

  /* Neobrutalism 装饰变量 */
  --border-width: 2px;
  --border-radius: 0px;
  --shadow: 4px 4px 0px 0px rgba(0,0,0,1);
}

/* ============================================ */
/* 基础样式 */
/* ============================================ */

@layer base {
  body {
    @apply bg-[var(--color-bg)] text-[var(--color-text)];
    font-family: system-ui, -apple-system, sans-serif;
  }
}

/* ============================================ */
/* Neobrutalism 组件样式 (保留) */
/* ============================================ */

@layer components {
  /* 核心按钮样式 */
  .btn-brutal {
    @apply inline-flex items-center justify-center px-4 py-2 
           border-2 border-black font-bold text-sm
           transition-all duration-150
           shadow-brutal hover:shadow-none
           hover:translate-x-[2px] hover:translate-y-[2px]
           active:translate-x-[4px] active:translate-y-[4px];
  }
  
  .btn-brutal-sm {
    @apply inline-flex items-center justify-center px-3 py-1.5 
           border-2 border-black font-bold text-xs
           transition-all duration-150
           shadow-brutal-sm hover:shadow-none
           hover:translate-x-[1px] hover:translate-y-[1px];
  }
  
  /* 卡片样式 */
  .card-brutal {
    @apply bg-white border-2 border-black shadow-brutal;
  }
  
  .card-brutal-sm {
    @apply bg-white border-2 border-black shadow-brutal-sm;
  }
  
  /* 输入框样式 */
  .input-brutal {
    @apply w-full px-3 py-2 
           border-2 border-black 
           bg-white 
           focus:outline-none focus:ring-2 focus:ring-brutal-yellow
           placeholder:text-black/40;
  }
  
  /* 导航链接 */
  .nav-link {
    @apply px-3 py-1 font-bold text-sm
           border-2 border-transparent
           hover:border-black hover:bg-white
           transition-all duration-150;
  }
  
  .nav-link-active {
    @apply px-3 py-1 font-bold text-sm
           border-2 border-black bg-brutal-yellow;
  }
}

/* ============================================ */
/* Preline Admin 组件样式 (新增) */
/* ============================================ */

@layer components {
  /* Preline 风格按钮 */
  .btn-preline {
    @apply inline-flex items-center justify-center gap-2 
           px-4 py-2.5 rounded-lg font-medium text-sm
           bg-blue-600 text-white
           hover:bg-blue-700 focus:outline-none focus:ring-2 
           focus:ring-blue-500 focus:ring-offset-2
           transition-all duration-200;
  }
  
  .btn-preline-secondary {
    @apply inline-flex items-center justify-center gap-2 
           px-4 py-2.5 rounded-lg font-medium text-sm
           bg-white text-gray-700
           border border-gray-300
           hover:bg-gray-50 focus:outline-none focus:ring-2
           focus:ring-gray-200 transition-all duration-200;
  }
  
  .btn-preline-danger {
    @apply inline-flex items-center justify-center gap-2 
           px-4 py-2.5 rounded-lg font-medium text-sm
           bg-red-600 text-white
           hover:bg-red-700 focus:outline-none focus:ring-2 
           focus:ring-red-500 focus:ring-offset-2
           transition-all duration-200;
  }
  
  /* Preline 风格卡片 */
  .card-preline {
    @apply bg-white rounded-xl 
           border border-gray-200
           shadow-sm hover:shadow-md transition-shadow duration-200;
  }
  
  .card-preline-header {
    @apply px-6 py-4 border-b border-gray-200
           flex items-center justify-between;
  }
  
  .card-preline-body {
    @apply px-6 py-4;
  }
  
  .card-preline-footer {
    @apply px-6 py-4 border-t border-gray-200
           flex items-center justify-end gap-3;
  }
  
  /* Preline 风格输入框 */
  .input-preline {
    @apply w-full px-4 py-2.5 rounded-lg 
           border border-gray-300 bg-white
           text-gray-900
           focus:outline-none focus:ring-2 
           focus:ring-blue-500/20 
           focus:border-blue-500
           placeholder:text-gray-400
           transition-all duration-200;
  }
  
  .label-preline {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }
  
  /* Preline 侧边栏 */
  .sidebar-preline {
    @apply w-64 bg-slate-900 min-h-screen
           fixed left-0 top-0 z-40;
  }
  
  .sidebar-preline-nav {
    @apply mt-6 px-3 space-y-1;
  }
  
  .sidebar-preline-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg
           text-gray-400 hover:bg-slate-800
           hover:text-white transition-colors duration-200;
  }
  
  .sidebar-preline-item.active {
    @apply bg-slate-800 text-white font-medium;
  }
  
  .sidebar-preline-icon {
    @apply w-5 h-5 flex-shrink-0;
  }
  
  /* Preline 页面头部 */
  .page-header-preline {
    @apply flex items-center justify-between mb-6;
  }
  
  .page-title-preline {
    @apply text-2xl font-semibold text-gray-900;
  }
  
  /* Preline 统计卡片 */
  .stats-card-preline {
    @apply bg-white rounded-xl p-6
           border border-gray-200 shadow-sm;
  }
  
  .stats-card-preline-label {
    @apply text-sm font-medium text-gray-500 mb-1;
  }
  
  .stats-card-preline-value {
    @apply text-3xl font-bold text-gray-900;
  }
  
  /* Preline 数据表格 */
  .table-preline {
    @apply w-full text-sm text-left;
  }
  
  .table-preline thead {
    @apply bg-gray-50 text-gray-700 font-medium;
  }
  
  .table-preline th {
    @apply px-6 py-4;
  }
  
  .table-preline td {
    @apply px-6 py-4 border-b border-gray-100;
  }
  
  .table-preline tbody tr:hover {
    @apply bg-gray-50;
  }
  
  /* Preline 标签 */
  .badge-preline {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full
           text-xs font-medium;
  }
  
  .badge-preline-green {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-preline-blue {
    @apply bg-blue-100 text-blue-800;
  }
  
  .badge-preline-gray {
    @apply bg-gray-100 text-gray-800;
  }
}

/* ============================================ */
/* 工具类扩展 */
/* ============================================ */

@layer utilities {
  .shadow-brutal {
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
  }
  
  .shadow-brutal-sm {
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
  }
}

/* ============================================ */
/* 滚动条样式 */
/* ============================================ */

/* Neobrutalism 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #FEF9E7;
  border-left: 2px solid black;
}

::-webkit-scrollbar-thumb {
  background: #000;
  border: 2px solid #FEF9E7;
}

::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* 选中文字样式 */
::selection {
  background: #FFDE59;
  color: #000;
}