/* ============================================
   Base Styles & Reset
   Fonts, reset, global defaults
   ============================================ */

/* ---- Font Imports ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css');

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

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

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--gradient-candy-bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.3s ease;
}

/* ---- Candy Wrapper Diagonal Stripes (page-level texture) ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 12px,
    rgba(255, 143, 171, 0.035) 12px,
    rgba(255, 143, 171, 0.035) 24px,
    transparent 24px,
    transparent 36px,
    rgba(195, 166, 255, 0.035) 36px,
    rgba(195, 166, 255, 0.035) 48px
  );
}

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

a:hover {
  color: var(--color-candy-lavender);
}

/* ---- Inherited Font ---- */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---- Images ---- */
img, svg {
  max-width: 100%;
  display: block;
}

/* ---- Lists ---- */
ul, ol {
  list-style: none;
}

/* ---- Selection ---- */
::selection {
  background: rgba(255, 143, 171, 0.25);
  color: var(--color-text-primary);
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

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

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ============================================
   Dark-mode element overrides
   ============================================ */

/* ---- Inputs & Selects ---- */
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

[data-theme="dark"] option {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}

/* ---- Header glass ---- */
[data-theme="dark"] .app-header {
  background: rgba(22, 19, 31, 0.9);
  border-bottom-color: var(--color-border);
}

/* ---- Cards ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .guide-card,
[data-theme="dark"] .light-card,
[data-theme="dark"] .history-item,
[data-theme="dark"] .preset-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

/* Hover backgrounds that use hardcoded #faf5ff */
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .history-item:hover,
[data-theme="dark"] .preset-card:hover {
  background: rgba(195, 166, 255, 0.08);
  border-color: var(--color-candy-lavender);
}

/* ---- Side panels ---- */
[data-theme="dark"] .side-panel {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .side-panel-header {
  border-bottom-color: var(--color-border);
}

/* ---- Result / Textarea backgrounds ---- */
[data-theme="dark"] .result-content,
[data-theme="dark"] .prompt-textarea,
[data-theme="dark"] .prompt-output-area {
  background: var(--color-bg-input);
  color: var(--color-text-primary);
}

/* ---- Scene view grid lines ---- */
[data-theme="dark"] .scene-view {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .scene-view::before {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(80, 70, 120, 0.4) 14px, rgba(80, 70, 120, 0.4) 15px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(80, 70, 120, 0.4) 14px, rgba(80, 70, 120, 0.4) 15px);
}

/* Scene controls — labels and pill buttons */
[data-theme="dark"] .scene-control-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .scene-pill,
[data-theme="dark"] .camera-preset,
[data-theme="dark"] .lighting-preset,
[data-theme="dark"] .aperture-option,
[data-theme="dark"] .time-preset,
[data-theme="dark"] .focal-option,
[data-theme="dark"] .framing-option,
[data-theme="dark"] .quality-option {
  background: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .scene-pill:hover,
[data-theme="dark"] .camera-preset:hover,
[data-theme="dark"] .lighting-preset:hover,
[data-theme="dark"] .aperture-option:hover,
[data-theme="dark"] .time-preset:hover {
  border-color: var(--color-candy-lavender);
  color: var(--color-text-primary);
}

[data-theme="dark"] .scene-preset-desc {
  color: var(--color-text-tertiary);
}

/* Scene view labels */
[data-theme="dark"] .scene-view-label {
  color: var(--color-text-tertiary);
}

/* Legend items */
[data-theme="dark"] .scene-legend-item {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .scene-legend-axes span {
  color: var(--color-text-tertiary);
}

/* ---- Light card overrides ---- */
[data-theme="dark"] .light-card-header {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .light-card-off {
  opacity: 0.6;
}

[data-theme="dark"] .light-type-select,
[data-theme="dark"] .light-lm-input {
  background: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .light-slider {
  background: var(--color-border);
}

/* ---- Canvas board ---- */
[data-theme="dark"] .canvas-board {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

/* Layer panel (current canvas classes) */
[data-theme="dark"] #layer-panel {
  border-left-color: var(--color-border);
}

[data-theme="dark"] .layer-tag {
  border-color: transparent;
}

[data-theme="dark"] .layer-tag:hover {
  background: rgba(195, 166, 255, 0.1);
  border-color: var(--color-border);
}

[data-theme="dark"] .layer-tag.layer-tag-active {
  background: rgba(195, 166, 255, 0.16);
  border-color: var(--color-candy-lavender);
}

/* ---- Composition controls ---- */
[data-theme="dark"] .composition-btn,
[data-theme="dark"] .res-btn,
[data-theme="dark"] .orient-btn {
  background: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .composition-btn:hover,
[data-theme="dark"] .res-btn:hover,
[data-theme="dark"] .orient-btn:hover {
  border-color: var(--color-candy-lavender);
  color: var(--color-text-primary);
}

/* ---- Slider component ---- */
[data-theme="dark"] .slider-item {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .slider-range {
  background: var(--color-border);
}

/* ---- Color temp buttons ---- */
[data-theme="dark"] .color-temp-btn {
  background: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .color-temp-btn:hover {
  color: var(--color-text-primary);
}

/* ---- Scrollbar ---- */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border);
}