/* ============================================================================
 * ZENPHOTO BRAND STUDIO (KIẾN TRÀ EDITION) — UNIFIED DESIGN TOKENS & THEME CSS
 * Adheres to Global Engineering Constitution:
 * - Mobile-First Responsive Architecture (320px -> 4K)
 * - Copyright-Free Vietnamese-Ready Typography Stack (Zero CLS)
 * - Strictly NO Purple Palette
 * ============================================================================ */

:root {
  /* Core Surfaces (Tea House Noir & Agarwood) */
  --bg-base: #090807;
  --bg-surface: #12100E;
  --bg-surface-elevated: #1A1714;
  --bg-surface-card: #24201C;
  --border-subtle: #332D27;
  --border-strong: #4A4239;

  /* Brand Accents (Imperial Gold, Zisha Clay, Jade) */
  --accent-gold-300: #EBD197;
  --accent-gold-400: #D4AF37;
  --accent-gold-500: #B89028;
  --accent-gold-600: #8F6D19;
  --accent-jade: #1C857C;
  --accent-crimson: #B83B2A;
  --accent-foliage: #538D4E;

  /* Text Hierarchy */
  --text-primary: #EDE8E1;
  --text-secondary: #C8BFB3;
  --text-muted: #8C8275;

  /* Layout & Spacing */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Copyright-Free Vietnamese-Ready Typography Stacks */
  --font-sans: "Be Vietnam Pro", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Mobile-first dynamic viewport height */
.studio-app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .studio-app-shell {
    height: 100dvh;
    overflow: hidden;
  }
  .studio-pane-height {
    height: calc(100dvh - 58px);
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold-500);
}

/* Precision Range Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #25221E;
  border-radius: 9999px;
  height: 6px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--accent-gold-300);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
  border: 2px solid var(--bg-base);
  transition: transform 0.12s ease, background-color 0.12s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  background: #FFF8E7;
}

input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--accent-gold-300);
  cursor: pointer;
  border: 2px solid var(--bg-base);
}

/* Touch-friendly interactive targets on mobile */
@media (max-width: 640px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
  input[type="range"]::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
  }
}

/* Canvas Viewport Checkerboard & Grid */
.studio-viewport-grid {
  background-color: #070605;
  background-image: radial-gradient(#221d17 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Interactive On-Canvas Selection Box Indicator */
.canvas-interactive-cursor-move {
  cursor: move !important;
}
.canvas-interactive-cursor-grab {
  cursor: grab;
}
.canvas-interactive-cursor-grab:active {
  cursor: grabbing;
}