/**
 * Nebula Theme - CSS Variables
 * Design System for Nebula WordPress Theme
 * Version: 2.0.0
 * Color Palette: Sky Blue #0EA5E9, Dark Slate #0F172A, Amber #F59E0B
 *
 * [P2-REFACTOR] 统一变量命名：统一使用 nebula- 前缀，删除 ds- 别名
 */

/* ============================
   Standard Breakpoints
   ============================ */
:root {
    /* [P2-REFACTOR] 统一响应式断点 */
    --nebula-breakpoint-xs: 480px;
    --nebula-breakpoint-sm: 576px;
    --nebula-breakpoint-md: 768px;
    --nebula-breakpoint-lg: 1024px;
    --nebula-breakpoint-xl: 1280px;
    --nebula-breakpoint-2xl: 1536px;
}

/* ============================
   Container & Layout
   ============================ */
:root {
    --nebula-container-max: 1200px;
    --nebula-container-article: 800px;
    --nebula-page-padding: 16px;
}

/* ============================
   Spacing System
   ============================ */
:root {
    --nebula-space-1: 4px;
    --nebula-space-2: 8px;
    --nebula-space-3: 12px;
    --nebula-space-4: 16px;
    --nebula-space-5: 20px;
    --nebula-space-6: 24px;
    --nebula-space-8: 32px;
    --nebula-space-10: 40px;
    --nebula-space-12: 48px;
    --nebula-space-16: 64px;
}

/* ============================
   Typography
   ============================ */
:root {
    --nebula-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nebula-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nebula-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

    --nebula-text-xs: 0.75rem;
    --nebula-text-sm: 0.875rem;
    --nebula-text-base: 1rem;
    --nebula-text-lg: 1.125rem;
    --nebula-text-xl: 1.25rem;
    --nebula-text-2xl: 1.5rem;
    --nebula-text-3xl: 1.875rem;
    --nebula-text-4xl: 2.25rem;
    --nebula-text-5xl: 3rem;

    --nebula-leading-tight: 1.25;
    --nebula-leading-normal: 1.5;
    --nebula-leading-relaxed: 1.625;

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

/* ============================
   Border Radius
   ============================ */
:root {
    --nebula-radius-sm: 4px;
    --nebula-radius-md: 8px;
    --nebula-radius-lg: 12px;
    --nebula-radius-xl: 16px;
    --nebula-radius-2xl: 24px;
    --nebula-radius-full: 9999px;
}

/* ============================
   Shadows
   ============================ */
:root {
    --nebula-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --nebula-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --nebula-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --nebula-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --nebula-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --nebula-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --nebula-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ============================
   Colors - Primary Palette
   ============================ */
:root {
    /* Primary - Sky Blue #0EA5E9 */
    --nebula-primary: #0EA5E9;
    --nebula-primary-light: #E0F2FE;
    --nebula-primary-lighter: #BAE6FD;
    --nebula-primary-dark: #0284C7;
    --nebula-primary-darker: #0369A1;
    --nebula-primary-hover: #0284C7;

    /* Secondary - Dark Slate #0F172A */
    --nebula-secondary: #0F172A;
    --nebula-secondary-light: #1E293B;
    --nebula-secondary-lighter: #334155;
    --nebula-secondary-dark: #020617;
    --nebula-secondary-hover: #1E293B;

    /* Accent - Amber #F59E0B */
    --nebula-accent: #F59E0B;
    --nebula-accent-light: #FEF3C7;
    --nebula-accent-lighter: #FDE68A;
    --nebula-accent-dark: #D97706;
    --nebula-accent-hover: #D97706;

    /* Teal (for hero sections) */
    --nebula-teal: #065A82;
    --nebula-teal-dark: #0C4A6E;
    --nebula-teal-light: #0EA5E9;
    --nebula-slate-light: #475569;

    /* [P1-FIX] 文字颜色对比度修复 - 提升 muted 颜色到满足 WCAG AA */
    /* Text - 调整对比度以满足 WCAG AA (4.5:1) */
    --nebula-text: #1E293B;
    --nebula-text-secondary: #475569;  /* 从 #64748B 提升对比度 */
    --nebula-text-muted: #64748B;      /* 从 #94A3B8 提升对比度 */
    --nebula-text-inverse: #FFFFFF;
}

/* ============================
   Colors - Background
   ============================ */
:root {
    --nebula-bg: #FFFFFF;
    --nebula-bg-secondary: #F8FAFC;
    --nebula-bg-tertiary: #F1F5F9;
    --nebula-bg-dark: #0F172A;
}

/* ============================
   Colors - Border
   ============================ */
:root {
    --nebula-border: #E2E8F0;
    --nebula-border-light: #F1F5F9;
    --nebula-border-dark: #CBD5E1;
}

/* ============================
   Colors - Status
   ============================ */
:root {
    --nebula-success: #10B981;
    --nebula-success-light: #D1FAE5;
    --nebula-success-dark: #059669;

    --nebula-warning: #F59E0B;
    --nebula-warning-light: #FEF3C7;
    --nebula-warning-dark: #D97706;

    --nebula-error: #EF4444;
    --nebula-error-light: #FEE2E2;
    --nebula-error-dark: #DC2626;

    --nebula-info: #0EA5E9;
    --nebula-info-light: #E0F2FE;
    --nebula-info-dark: #0284C7;
}

/* ============================
   Gradients
   ============================ */
:root {
    --nebula-gradient-primary: linear-gradient(135deg, var(--nebula-primary, #0EA5E9), var(--nebula-secondary, #0F172A));
    --nebula-gradient-hero: linear-gradient(135deg, var(--nebula-teal, #065A82) 0%, var(--nebula-teal-dark, #0C4A6E) 50%, var(--nebula-teal, #065A82) 100%);
}

/* ============================
   Transitions
   ============================ */
:root {
    --nebula-duration-fast: 0.15s;
    --nebula-duration-normal: 0.2s;
    --nebula-duration-slow: 0.3s;
    --nebula-duration-slower: 0.5s;
    --nebula-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --nebula-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --nebula-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================
   Z-Index Scale
   ============================ */
:root {
    --nebula-z-dropdown: 100;
    --nebula-z-sticky: 200;
    --nebula-z-fixed: 300;
    --nebula-z-modal-backdrop: 400;
    --nebula-z-modal: 500;
    --nebula-z-popover: 600;
    --nebula-z-tooltip: 700;
}

/* ============================
   Navigation & Header
   ============================ */
:root {
    --nebula-header-height: 64px;
    --nebula-logo-height: 40px;
    --nebula-logo-font-size: 1.25rem;
}

/* ============================
   Aliases (向后兼容 ds- 前缀)
   ============================ */
/* [P2-NOTE] 为保持向后兼容，提供 ds- 前缀别名 */
/* 新代码应使用 nebula- 前缀 */
:root {
    /* Spacing */
    --ds-space-1: var(--nebula-space-1);
    --ds-space-2: var(--nebula-space-2);
    --ds-space-3: var(--nebula-space-3);
    --ds-space-4: var(--nebula-space-4);
    --ds-space-5: var(--nebula-space-5);
    --ds-space-6: var(--nebula-space-6);
    --ds-space-8: var(--nebula-space-8);
    --ds-space-10: var(--nebula-space-10);
    --ds-space-12: var(--nebula-space-12);
    --ds-space-16: var(--nebula-space-16);

    /* Colors */
    --ds-primary: var(--nebula-primary);
    --ds-primary-light: var(--nebula-primary-light);
    --ds-primary-dark: var(--nebula-primary-dark);
    --ds-primary-hover: var(--nebula-primary-hover);

    --ds-secondary: var(--nebula-secondary);
    --ds-secondary-light: var(--nebula-secondary-light);
    --ds-secondary-dark: var(--nebula-secondary-dark);

    --ds-accent: var(--nebula-accent);
    --ds-accent-light: var(--nebula-accent-light);
    --ds-accent-dark: var(--nebula-accent-dark);

    --ds-bg-primary: var(--nebula-bg);
    --ds-bg-secondary: var(--nebula-bg-secondary);
    --ds-bg-tertiary: var(--nebula-bg-tertiary);

    --ds-text-primary: var(--nebula-text);
    --ds-text-secondary: var(--nebula-text-secondary);
    --ds-text-muted: var(--nebula-text-muted);

    --ds-border: var(--nebula-border);
    --ds-border-light: var(--nebula-border-light);

    --ds-success: var(--nebula-success);
    --ds-success-light: var(--nebula-success-light);
    --ds-warning: var(--nebula-warning);
    --ds-warning-light: var(--nebula-warning-light);
    --ds-error: var(--nebula-error);
    --ds-error-light: var(--nebula-error-light);
    --ds-info: var(--nebula-info);
    --ds-info-light: var(--nebula-info-light);

    /* Typography */
    --ds-font-sans: var(--nebula-font-sans);
    --ds-font-heading: var(--nebula-font-heading);
    --ds-font-mono: var(--nebula-font-mono);
    --ds-font-normal: var(--nebula-font-normal);
    --ds-font-medium: var(--nebula-font-medium);
    --ds-font-semibold: var(--nebula-font-semibold);
    --ds-font-bold: var(--nebula-font-bold);

    /* Radius */
    --ds-radius-sm: var(--nebula-radius-sm);
    --ds-radius-md: var(--nebula-radius-md);
    --ds-radius-lg: var(--nebula-radius-lg);
    --ds-radius-xl: var(--nebula-radius-xl);
    --ds-radius-full: var(--nebula-radius-full);

    /* Shadows */
    --ds-shadow-sm: var(--nebula-shadow-sm);
    --ds-shadow-md: var(--nebula-shadow-md);
    --ds-shadow-lg: var(--nebula-shadow-lg);
    --ds-shadow-xl: var(--nebula-shadow-xl);

    /* Transitions */
    --ds-duration-fast: var(--nebula-duration-fast);
    --ds-duration-normal: var(--nebula-duration-normal);
    --ds-duration-slow: var(--nebula-duration-slow);
    --ds-ease-out: var(--nebula-ease-out);
    --ds-ease-in-out: var(--nebula-ease-in-out);

    /* Z-Index */
    --ds-z-dropdown: var(--nebula-z-dropdown);
    --ds-z-sticky: var(--nebula-z-sticky);
    --ds-z-fixed: var(--nebula-z-fixed);
    --ds-z-modal-backdrop: var(--nebula-z-modal-backdrop);
    --ds-z-modal: var(--nebula-z-modal);
    --ds-z-popover: var(--nebula-z-popover);
    --ds-z-tooltip: var(--nebula-z-tooltip);

    /* Layout */
    --ds-container-max: var(--nebula-container-max);
    --ds-page-padding: var(--nebula-page-padding);
    --ds-nav-height: var(--nebula-header-height);
    --ds-logo-height: var(--nebula-logo-height);
    --ds-logo-font-size: var(--nebula-logo-font-size);
    --ds-header-bg: var(--nebula-bg);
    --ds-header-border: var(--nebula-border);
    --ds-brand: var(--nebula-primary);
}

/* ============================
   Dark Mode - 统一使用 data-theme 属性
   [P2-REFACTOR] 移除 body.dark-mode 方式，统一使用 data-theme
   ============================ */
[data-theme="dark"] {
    /* Background */
    --nebula-bg: #0F172A;
    --nebula-bg-secondary: #1E293B;
    --nebula-bg-tertiary: #334155;

    /* Text */
    --nebula-text: #F1F5F9;
    --nebula-text-secondary: #94A3B8;
    --nebula-text-muted: #64748B;

    /* Border */
    --nebula-border: #334155;
    --nebula-border-light: #475567;

    /* Header */
    --nebula-header-bg: #0F172A;
    --nebula-header-border: #334155;

    /* Aliases */
    --ds-bg-primary: #0F172A;
    --ds-bg-secondary: #1E293B;
    --ds-bg-tertiary: #334155;
    --ds-text-primary: #F1F5F9;
    --ds-text-secondary: #94A3B8;
    --ds-text-muted: #64748B;
    --ds-border: #334155;
    --ds-header-bg: #0F172A;
    --ds-header-border: #334155;
}

/* ============================
   Dark Mode - 兼容 body.dark-mode 旧方式
   [P2-NOTE] 保留 body.dark-mode 兼容，但优先使用 data-theme
   ============================ */
body.dark-mode {
    --nebula-bg: #0F172A;
    --nebula-bg-secondary: #1E293B;
    --nebula-bg-tertiary: #334155;
    --nebula-text: #F1F5F9;
    --nebula-text-secondary: #94A3B8;
    --nebula-text-muted: #64748B;
    --nebula-border: #334155;
}