/* Design System Variables for 简力 (Jianli) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: light dark;
  /* Brand Theme Colors - Premium Indigo & Teal Accent (Completely separate from ClassPet Orange) */
  --primary-color: #0076fe;      /* Slate Indigo */
  --primary-hover: #005fd1;      /* Deep Indigo */
  --primary-light: #f0f7ff;      /* Indigo Light Tint */
  --primary-glow: rgba(0, 118, 254, 0.15);
  --btn-glow-shadow: rgba(0, 118, 254, 0.35);
  --btn-glow-hover-shadow: rgba(0, 118, 254, 0.5);
  
  --accent-color: #0d9488;       /* Emerald/Teal */
  --accent-hover: #0f766e;       /* Deep Emerald */
  --accent-light: #f0fdfa;       /* Teal Light Tint */
  --accent-glow: rgba(13, 148, 136, 0.15);

  /* Neutral Palette */
  --bg-dark: #0f172a;            /* Slate 900 */
  --bg-dark-card: #1e293b;       /* Slate 800 */
  --bg-light: #f8fafc;           /* Slate 50 */
  --bg-white: #ffffff;
  
  --text-main: #0f172a;          /* Slate 900 */
  --text-muted: #475569;         /* Slate 600 */
  --text-light: #94a3b8;         /* Slate 400 */
  --text-white: #ffffff;
  
  --border-color: #e2e8f0;       /* Slate 200 */
  --border-focus: #0076fe;       /* Indigo 600 */
  
  /* Template Accent Palette */
  --theme-indigo: #0076fe;
  --theme-indigo-light: #f0f7ff;
  --theme-blue: #1e40af;
  --theme-blue-light: #eff6ff;
  --theme-teal: #0f766e;
  --theme-teal-light: #f0fdfa;
  --theme-black: #1e293b;
  --theme-black-light: #f1f5f9;
  --theme-red: #dc2626;
  --theme-red-light: #fef2f2;

  /* Typography */
  --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 118, 254, 0.04), 0 4px 6px -4px rgba(0, 118, 254, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.04);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s ease;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
}

/* Dark Theme Overrides */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Neutral Palette Override - Premium Warm Charcoal / Stone Palette */
  --bg-light: #0c0a09;            /* Stone 950: warm pitch black */
  --bg-white: #1c1917;            /* Stone 900: warm dark charcoal for cards and headers */
  --bg-dark: #090807;             /* Stone 975: extremely dark warm black */
  --bg-dark-card: #1c1917;        /* Warm dark card interior */
  
  --text-main: #f5f5f4;          /* Stone 100: Warm high-contrast light text */
  --text-muted: #a8a29e;         /* Stone 400: Warm muted light text */
  --text-light: #78716c;         /* Stone 500: Warm muted gray text */
  
  --border-color: #2e2a24;       /* Warm dark theme border */
  --border-focus: #ff7a00;       /* Warm orange focus border */

  /* Primary Brand Theme Colors - Warm Logo Orange in Dark Mode */
  --primary-color: #ff7a00;       /* Warm logo orange */
  --primary-hover: #ea580c;       /* Slightly deeper orange */
  --primary-light: rgba(255, 122, 0, 0.12); /* Semi-transparent warm orange */
  --primary-glow: rgba(255, 122, 0, 0.25);
  --btn-glow-shadow: rgba(255, 122, 0, 0.35);
  --btn-glow-hover-shadow: rgba(255, 122, 0, 0.5);

  --accent-color: #ff9d42;        /* Lighter warm orange accent */
  --accent-hover: #ff7a00;
  --accent-light: rgba(255, 157, 66, 0.12);
  --accent-glow: rgba(255, 157, 66, 0.25);

  /* Shadows adjustments for Dark Mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Logo Dark Mode Transparency & Blend (Fixes logo white background: black parts become white, blue parts become orange) */
html[data-theme="dark"] .logo-img,
html[data-theme="dark"] .brand-logo-img,
html[data-theme="dark"] .logo-area img {
  filter: invert(1) hue-rotate(-10deg) brightness(1.15) contrast(1.05);
  mix-blend-mode: screen;
}

/* Dark Mode Workspace / Preview Pane Background */
html[data-theme="dark"] .preview-pane {
  background-color: #000000;
}

/* Subtle page boundaries in Dark Mode Workspace */
html[data-theme="dark"] .resume-page-sheet {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}


/* Editor Section Header Overlay refinement in Dark Mode */
html[data-theme="dark"] .editor-section summary {
  background-color: rgba(255, 255, 255, 0.02);
}
html[data-theme="dark"] .editor-section summary:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Style Bar Dark Overrides */
html[data-theme="dark"] .builder-style-bar {
  background-color: rgba(28, 25, 23, 0.85);
  border-bottom: 1px solid rgba(46, 42, 36, 0.8);
}

html[data-theme="dark"] .style-card {
  background: rgba(28, 25, 23, 0.7);
  border-color: var(--border-color);
}

html[data-theme="dark"] .style-card:hover {
  background: var(--bg-white);
  border-color: rgba(255, 122, 0, 0.35);
  box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .style-icon-wrapper {
  background: rgba(255, 122, 0, 0.12);
  color: var(--primary-color);
}

html[data-theme="dark"] .style-card:hover .style-icon-wrapper {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  color: #ffffff;
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-normal);
  position: relative;
  outline: none;
  flex-shrink: 0;
  box-shadow: none;
}

.theme-toggle-btn:hover {
  color: var(--primary-color);
  transform: translateY(-1px) scale(1.1);
}

.theme-toggle-btn:active {
  transform: translateY(0) scale(0.95);
}

.theme-toggle-btn svg {
  position: absolute;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* By default (light theme), show moon, hide sun */
.theme-toggle-btn .theme-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.theme-toggle-btn .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* In dark theme, show sun, hide moon */
html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

html[data-theme="dark"] .theme-toggle-btn .theme-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-light);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--text-main);
  transition: color var(--transition-normal);
}

/* Ensure the resume preview canvas always renders in light theme styles, matching physical paper */
.resume-canvas {
  --bg-white: #ffffff;
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-light: #94a3b8;
  --border-color: #e2e8f0;
  
  /* Lock resume shadows to light theme defaults */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 118, 254, 0.04), 0 4px 6px -4px rgba(0, 118, 254, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.04);

  color: var(--text-main);
  background-color: var(--bg-white);
  color-scheme: light;
}