/* ================================================
   NovelAI Design System — CSS Custom Properties
   ================================================ */

:root {
  /* ---- Colors: Dark Theme ---- */
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d27;
  --bg-tertiary: #242838;
  --bg-elevated: #2a2e3f;
  --bg-hover: #313650;

  --text-primary: #e8eaf0;
  --text-secondary: #9ca3b4;
  --text-muted: #6b7280;
  --text-inverse: #0f1117;

  --accent-primary: #6c5ce7;
  --accent-primary-hover: #7d6ff0;
  --accent-primary-light: rgba(108, 92, 231, 0.15);
  --accent-secondary: #00cec9;
  --accent-secondary-light: rgba(0, 206, 201, 0.15);
  --accent-warm: #fd79a8;
  --accent-warm-light: rgba(253, 121, 168, 0.15);
  --accent-gold: #fdcb6e;
  --accent-gold-light: rgba(253, 203, 110, 0.15);

  --success: #00b894;
  --success-light: rgba(0, 184, 148, 0.15);
  --warning: #fdcb6e;
  --warning-light: rgba(253, 203, 110, 0.15);
  --danger: #e17055;
  --danger-light: rgba(225, 112, 85, 0.15);
  --info: #74b9ff;
  --info-light: rgba(116, 185, 255, 0.15);

  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Glass / Frosted effects */
  --glass-bg: rgba(26, 29, 39, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(20px);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6c5ce7, #a29bfe);
  --gradient-secondary: linear-gradient(135deg, #00cec9, #81ecec);
  --gradient-warm: linear-gradient(135deg, #fd79a8, #fab1a0);
  --gradient-dark: linear-gradient(180deg, #1a1d27, #0f1117);
  --gradient-card: linear-gradient(145deg, rgba(36, 40, 56, 0.6), rgba(26, 29, 39, 0.9));
  --gradient-hero: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(0, 206, 201, 0.1), rgba(253, 121, 168, 0.1));

  /* ---- Typography ---- */
  --font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", Georgia, serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.75rem;   /* 28px */
  --text-4xl: 2rem;      /* 32px */
  --text-5xl: 2.5rem;    /* 40px */

  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

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

  /* ---- Spacing ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(108, 92, 231, 0.3);
  --shadow-glow-sm: 0 0 10px rgba(108, 92, 231, 0.2);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-panel: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-Index ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- Layout ---- */
  --sidebar-width: 260px;
  --sidebar-collapsed: 64px;
  --topbar-height: 56px;
  --editor-panel-width: 340px;
  --container-max: 1400px;
  --mobile-bottom-bar: 60px;
}

/* Light theme overrides (future) */
[data-theme="light"] {
  --bg-primary: #f5f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef0f6;
  --bg-elevated: #ffffff;
  --bg-hover: #e8eaf0;
  --text-primary: #1a1d27;
  --text-secondary: #5a6178;
  --text-muted: #9ca3b4;
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.04);
  --border-strong: rgba(0, 0, 0, 0.15);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}