/* ===================================================================
   Coral Dashboard Theme — CSS Custom Properties
   Light & Dark modes
   =================================================================== */

/* ===========================
   Light Theme (default)
   =========================== */
:root,
[data-theme="light"] {
  /* ---------- Backgrounds ---------- */
  --bg-primary: #F9FAFB;
  --bg-secondary: #F3F4F6;
  --bg-tertiary: #E5E7EB;
  --bg-inverse: #111827;

  /* ---------- Surfaces ---------- */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F9FAFB;
  --surface-elevated: #FFFFFF;
  --surface-hover: #F3F4F6;
  --surface-active: #FFF1F3;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  /* ---------- Text ---------- */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --text-placeholder: #D1D5DB;
  --text-disabled: #D1D5DB;
  --text-inverse: #FFFFFF;
  --text-link: #4A90E2;
  --text-link-hover: #357ABD;

  /* ---------- Brand / Primary (Coral Pink) ---------- */
  --primary-default: #FF4D6D;
  --primary-hover: #E8445F;
  --primary-active: #D43D55;
  --primary-subtle: #FFF1F3;
  --primary-muted: #FFD6DD;
  --primary-text: #FFFFFF;
  --primary-10: rgba(255, 77, 109, 0.1);
  --primary-20: rgba(255, 77, 109, 0.2);
  --primary-30: rgba(255, 77, 109, 0.3);

  /* ---------- Secondary (Blue) ---------- */
  --secondary-default: #4A90E2;
  --secondary-hover: #357ABD;
  --secondary-active: #2968A8;
  --secondary-subtle: #EBF3FC;
  --secondary-muted: #B8D4F0;
  --secondary-text: #FFFFFF;
  --secondary-10: rgba(74, 144, 226, 0.1);
  --secondary-20: rgba(74, 144, 226, 0.2);

  /* ---------- Status Colors ---------- */
  --success-default: #10B981;
  --success-subtle: #D1FAE5;
  --success-text: #065F46;
  --success-hover: #059669;

  --warning-default: #F59E0B;
  --warning-subtle: #FEF3C7;
  --warning-text: #92400E;
  --warning-hover: #D97706;

  --error-default: #EF4444;
  --error-subtle: #FEE2E2;
  --error-text: #991B1B;
  --error-hover: #DC2626;

  --info-default: #3B82F6;
  --info-subtle: #DBEAFE;
  --info-text: #1E40AF;
  --info-hover: #2563EB;

  /* ---------- Borders ---------- */
  --border-primary: #E5E7EB;
  --border-secondary: #D1D5DB;
  --border-hover: #9CA3AF;
  --border-focus: #FF4D6D;
  --border-active: #FF4D6D;
  --border-subtle: #F3F4F6;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 4px 14px rgba(255, 77, 109, 0.25);
  --shadow-primary-lg: 0 8px 24px rgba(255, 77, 109, 0.3);

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, #FF4D6D 0%, #FF8BA5 100%);
  --gradient-primary-hover: linear-gradient(135deg, #E8445F 0%, #FF6B8A 100%);
  --gradient-secondary: linear-gradient(135deg, #4A90E2 0%, #68A8F0 100%);
  --gradient-surface: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  --gradient-hero: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* ---------- Sidebar / Navigation ---------- */
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #E5E7EB;
  --sidebar-item-hover: #F3F4F6;
  --sidebar-item-active: #FFF1F3;
  --sidebar-item-active-text: #FF4D6D;
  --sidebar-item-active-indicator: #FF4D6D;
  --sidebar-text: #6B7280;
  --sidebar-text-active: #FF4D6D;
  --sidebar-icon: #9CA3AF;
  --sidebar-icon-active: #FF4D6D;
  --sidebar-logo-bg: transparent;
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 72px;

  /* ---------- Topbar ---------- */
  --topbar-bg: #FFFFFF;
  --topbar-border: #E5E7EB;
  --topbar-text: #111827;
  --topbar-height: 69px;

  /* ---------- Input / Form ---------- */
  --input-bg: #FFFFFF;
  --input-border: #D1D5DB;
  --input-border-hover: #9CA3AF;
  --input-border-focus: #FF4D6D;
  --input-text: #111827;
  --input-placeholder: #9CA3AF;
  --input-disabled-bg: #F3F4F6;
  --input-disabled-text: #9CA3AF;
  --input-ring: rgba(255, 77, 109, 0.2);

  /* ---------- Button ---------- */
  --btn-primary-bg: #FF4D6D;
  --btn-primary-hover: #E8445F;
  --btn-primary-active: #D43D55;
  --btn-primary-text: #FFFFFF;
  --btn-primary-shadow: 0 2px 8px rgba(255, 77, 109, 0.3);

  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-hover: #F9FAFB;
  --btn-secondary-active: #F3F4F6;
  --btn-secondary-text: #374151;
  --btn-secondary-border: #D1D5DB;

  --btn-ghost-bg: transparent;
  --btn-ghost-hover: #F3F4F6;
  --btn-ghost-active: #E5E7EB;
  --btn-ghost-text: #6B7280;

  /* ---------- Editor ---------- */
  --editor-bg: #FFFFFF;
  --editor-border: #E5E7EB;
  --editor-line-number: #D1D5DB;
  --editor-selection: rgba(255, 77, 109, 0.15);
  --editor-cursor: #FF4D6D;
  --editor-gutter: #F9FAFB;
  --editor-toolbar-bg: #F9FAFB;
  --editor-toolbar-border: #E5E7EB;
  --editor-statusbar-bg: #F9FAFB;
  --editor-statusbar-border: #E5E7EB;
  --editor-statusbar-text: #6B7280;

  /* Diff highlighting */
  --diff-add-bg: #FFF1F3;
  --diff-add-text: #D43D55;
  --diff-add-border: #FFD6DD;
  --diff-remove-bg: #FEE2E2;
  --diff-remove-text: #991B1B;
  --diff-remove-border: #FECACA;

  /* ---------- Tags / Badges ---------- */
  --tag-default-bg: #F3F4F6;
  --tag-default-text: #374151;
  --tag-primary-bg: #FFF1F3;
  --tag-primary-text: #FF4D6D;
  --tag-success-bg: #D1FAE5;
  --tag-success-text: #065F46;
  --tag-warning-bg: #FEF3C7;
  --tag-warning-text: #92400E;
  --tag-error-bg: #FEE2E2;
  --tag-error-text: #991B1B;
  --tag-info-bg: #DBEAFE;
  --tag-info-text: #1E40AF;

  /* ---------- Progress ---------- */
  --progress-bg: #E5E7EB;
  --progress-fill: #FF4D6D;
  --progress-text: #6B7280;

  /* ---------- Scrollbar ---------- */
  --scrollbar-bg: transparent;
  --scrollbar-thumb: #D1D5DB;
  --scrollbar-thumb-hover: #9CA3AF;

  /* ---------- Misc ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ---------- Feature Card Colors ---------- */
  --feature-blue: #3B82F6;
  --feature-blue-bg: #EFF6FF;
  --feature-cyan: #06B6D4;
  --feature-cyan-bg: #ECFEFF;
  --feature-green: #10B981;
  --feature-green-bg: #ECFDF5;
  --feature-orange: #F59E0B;
  --feature-orange-bg: #FFFBEB;
  --feature-indigo: #6366F1;
  --feature-indigo-bg: #EEF2FF;

  /* ---------- Membership ---------- */
  --vip-color: #F59E0B;
  --vip-bg: #FFFBEB;
  --svip-color: #8B5CF6;
  --svip-bg: #F5F3FF;
  --svip-gradient: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

/* ===========================
   Dark Theme
   =========================== */
[data-theme="dark"] {
  /* ---------- Backgrounds ---------- */
  --bg-primary: #111827;
  --bg-secondary: #1F2937;
  --bg-tertiary: #374151;
  --bg-inverse: #F9FAFB;

  /* ---------- Surfaces ---------- */
  --surface-primary: #1F2937;
  --surface-secondary: #111827;
  --surface-elevated: #374151;
  --surface-hover: #374151;
  --surface-active: rgba(255, 107, 138, 0.1);
  --surface-overlay: rgba(0, 0, 0, 0.7);

  /* ---------- Text ---------- */
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --text-placeholder: #4B5563;
  --text-disabled: #4B5563;
  --text-inverse: #111827;
  --text-link: #5BA3F5;
  --text-link-hover: #7CB8F8;

  /* ---------- Brand / Primary (Coral Pink — brighter in dark) ---------- */
  --primary-default: #FF6B8A;
  --primary-hover: #FF8BA5;
  --primary-active: #FF4D6D;
  --primary-subtle: rgba(255, 107, 138, 0.12);
  --primary-muted: rgba(255, 107, 138, 0.25);
  --primary-text: #FFFFFF;
  --primary-10: rgba(255, 107, 138, 0.1);
  --primary-20: rgba(255, 107, 138, 0.2);
  --primary-30: rgba(255, 107, 138, 0.3);

  /* ---------- Secondary (Blue — brighter in dark) ---------- */
  --secondary-default: #5BA3F5;
  --secondary-hover: #7CB8F8;
  --secondary-active: #4A90E2;
  --secondary-subtle: rgba(91, 163, 245, 0.12);
  --secondary-muted: rgba(91, 163, 245, 0.25);
  --secondary-text: #FFFFFF;
  --secondary-10: rgba(91, 163, 245, 0.1);
  --secondary-20: rgba(91, 163, 245, 0.2);

  /* ---------- Status Colors ---------- */
  --success-default: #34D399;
  --success-subtle: rgba(16, 185, 129, 0.15);
  --success-text: #6EE7B7;
  --success-hover: #10B981;

  --warning-default: #FBBF24;
  --warning-subtle: rgba(245, 158, 11, 0.15);
  --warning-text: #FCD34D;
  --warning-hover: #F59E0B;

  --error-default: #F87171;
  --error-subtle: rgba(239, 68, 68, 0.15);
  --error-text: #FCA5A5;
  --error-hover: #EF4444;

  --info-default: #60A5FA;
  --info-subtle: rgba(59, 130, 246, 0.15);
  --info-text: #93BBFD;
  --info-hover: #3B82F6;

  /* ---------- Borders ---------- */
  --border-primary: #374151;
  --border-secondary: #4B5563;
  --border-hover: #6B7280;
  --border-focus: #FF6B8A;
  --border-active: #FF6B8A;
  --border-subtle: #1F2937;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-primary: 0 4px 14px rgba(255, 107, 138, 0.2);
  --shadow-primary-lg: 0 8px 24px rgba(255, 107, 138, 0.25);

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, #FF6B8A 0%, #FFB1C4 100%);
  --gradient-primary-hover: linear-gradient(135deg, #FF4D6D 0%, #FF8BA5 100%);
  --gradient-secondary: linear-gradient(135deg, #5BA3F5 0%, #7CB8F8 100%);
  --gradient-surface: linear-gradient(135deg, #1F2937 0%, #111827 100%);
  --gradient-success: linear-gradient(135deg, #34D399 0%, #6EE7B7 100%);
  --gradient-hero: linear-gradient(135deg, #059669 0%, #10B981 100%);

  /* ---------- Sidebar / Navigation ---------- */
  --sidebar-bg: #1F2937;
  --sidebar-border: #374151;
  --sidebar-item-hover: #374151;
  --sidebar-item-active: rgba(255, 107, 138, 0.1);
  --sidebar-item-active-text: #FF6B8A;
  --sidebar-item-active-indicator: #FF6B8A;
  --sidebar-text: #9CA3AF;
  --sidebar-text-active: #FF6B8A;
  --sidebar-icon: #6B7280;
  --sidebar-icon-active: #FF6B8A;
  --sidebar-logo-bg: transparent;
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 72px;

  /* ---------- Topbar ---------- */
  --topbar-bg: #1F2937;
  --topbar-border: #374151;
  --topbar-text: #F9FAFB;
  --topbar-height: 69px;

  /* ---------- Input / Form ---------- */
  --input-bg: #374151;
  --input-border: #4B5563;
  --input-border-hover: #6B7280;
  --input-border-focus: #FF6B8A;
  --input-text: #F9FAFB;
  --input-placeholder: #6B7280;
  --input-disabled-bg: #1F2937;
  --input-disabled-text: #4B5563;
  --input-ring: rgba(255, 107, 138, 0.2);

  /* ---------- Button ---------- */
  --btn-primary-bg: #FF6B8A;
  --btn-primary-hover: #FF8BA5;
  --btn-primary-active: #FF4D6D;
  --btn-primary-text: #FFFFFF;
  --btn-primary-shadow: 0 2px 8px rgba(255, 107, 138, 0.25);

  --btn-secondary-bg: #374151;
  --btn-secondary-hover: #4B5563;
  --btn-secondary-active: #6B7280;
  --btn-secondary-text: #D1D5DB;
  --btn-secondary-border: #4B5563;

  --btn-ghost-bg: transparent;
  --btn-ghost-hover: #374151;
  --btn-ghost-active: #4B5563;
  --btn-ghost-text: #9CA3AF;

  /* ---------- Editor ---------- */
  --editor-bg: #1F2937;
  --editor-border: #374151;
  --editor-line-number: #4B5563;
  --editor-selection: rgba(255, 107, 138, 0.2);
  --editor-cursor: #FF6B8A;
  --editor-gutter: #111827;
  --editor-toolbar-bg: #1F2937;
  --editor-toolbar-border: #374151;
  --editor-statusbar-bg: #1F2937;
  --editor-statusbar-border: #374151;
  --editor-statusbar-text: #9CA3AF;

  /* Diff highlighting */
  --diff-add-bg: rgba(255, 107, 138, 0.15);
  --diff-add-text: #FF6B8A;
  --diff-add-border: rgba(255, 107, 138, 0.3);
  --diff-remove-bg: rgba(239, 68, 68, 0.15);
  --diff-remove-text: #FCA5A5;
  --diff-remove-border: rgba(239, 68, 68, 0.3);

  /* ---------- Tags / Badges ---------- */
  --tag-default-bg: #374151;
  --tag-default-text: #D1D5DB;
  --tag-primary-bg: rgba(255, 107, 138, 0.12);
  --tag-primary-text: #FF6B8A;
  --tag-success-bg: rgba(16, 185, 129, 0.15);
  --tag-success-text: #6EE7B7;
  --tag-warning-bg: rgba(245, 158, 11, 0.15);
  --tag-warning-text: #FCD34D;
  --tag-error-bg: rgba(239, 68, 68, 0.15);
  --tag-error-text: #FCA5A5;
  --tag-info-bg: rgba(59, 130, 246, 0.15);
  --tag-info-text: #93BBFD;

  /* ---------- Progress ---------- */
  --progress-bg: #374151;
  --progress-fill: #FF6B8A;
  --progress-text: #9CA3AF;

  /* ---------- Scrollbar ---------- */
  --scrollbar-bg: transparent;
  --scrollbar-thumb: #4B5563;
  --scrollbar-thumb-hover: #6B7280;

  /* ---------- Misc ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ---------- Feature Card Colors ---------- */
  --feature-blue: #60A5FA;
  --feature-blue-bg: rgba(59, 130, 246, 0.12);
  --feature-cyan: #22D3EE;
  --feature-cyan-bg: rgba(6, 182, 212, 0.12);
  --feature-green: #34D399;
  --feature-green-bg: rgba(16, 185, 129, 0.12);
  --feature-orange: #FBBF24;
  --feature-orange-bg: rgba(245, 158, 11, 0.12);
  --feature-indigo: #818CF8;
  --feature-indigo-bg: rgba(99, 102, 241, 0.12);

  /* ---------- Membership ---------- */
  --vip-color: #FBBF24;
  --vip-bg: rgba(245, 158, 11, 0.15);
  --svip-color: #A78BFA;
  --svip-bg: rgba(139, 92, 246, 0.15);
  --svip-gradient: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%);
}

/* ---------- 1440px 笔记本适配 ---------- */
@media (max-width: 1440px) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 56px;
  }
}

/* ===========================
   Global Reset & Base
   =========================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
  background: var(--primary-20);
  color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
}

/* Material Icons sizing */
.material-icons {
  font-size: 20px;
  vertical-align: middle;
  user-select: none;
}