/* ================================================================
   SiteHunter Web Hub | Precision Location Intelligence System
   - Palette: Deep Topographic Midnight (#0E1218), Radar Green (#10D597), Blueprint Blue (#3B82F6)
   - Typography: Space Grotesk (Display/Numbers), Inter (Body), JetBrains Mono (Coordinates)
   ================================================================ */

/* ===== CORE SYSTEM TOKENS ===== */
/* ================================================================
   SiteHunter Web Hub | Swiss Editorial Financial Palette 2.0
   - Palette: Warm Oatmeal Paper Canvas (#F4EFE7), Ngà Sáng (#FBF8F2)
   - Accent: Deep Terracotta (#B25A2B - Quyền uy & Chiều sâu thẩm định)
   - Hairline: Granite Hairline 1px (#C0B5A6 - Sắc nét, chống bệt ngoài trời)
   - Financial Indicators: Forest Pine (#27523E), Aged Amber (#8C531B), Oxide Red (#83342B)
   - Philosophy: Zero-Radius Brutalism, 1px Hairline Grid, High-Contrast Typography
   ================================================================ */

/* ===== CORE SYSTEM TOKENS (SWISS EDITORIAL UTILITY 2.0) ===== */
:root {
  /* Surface Colors - Warm Oatmeal Paper Canvas */
  --canvas: #f4efe7;
  --surface-soft: #ede7dc;
  --surface-card: #fbf8f2;
  --surface-card-hover: #fffaf4;
  --surface-elevated: #fbf8f2;
  --surface-cream: #fffaf4;
  --surface-cream-soft: #f4efe7;

  /* Brand Colors - Deep Terracotta 2.0 (Cam Đất Nung Sẫm LEOXIS) */
  --primary-coral: #b25a2b;
  --primary-coral-hover: #984b22;
  --primary-coral-active: #813c19;
  --primary-coral-subtle: rgba(178, 90, 43, 0.12);
  --primary-coral-border: rgba(178, 90, 43, 0.35);
  --coral-glow: none;

  /* Muted Financial Status Indicators (Chuẩn Kế Toán Khoáng Sản) */
  --accent-teal: #335d58;
  --accent-amber: #8c531b;
  --accent-green: #27523e;
  --accent-red: #83342b;

  /* Text Hierarchy - Warm Ink */
  --text-primary: #1e1b18;
  --text-high: #1e1b18;
  --text-base: #1e1b18;
  --text-secondary: #4a453e;
  --text-muted: #6c665f;
  --text-dim: #8e8880;
  --text-coral: #b25a2b;

  /* Surface & Hairline Semantic Tokens */
  --surface-bg: #f4efe7;
  --surface-hover: #ede7dc;
  --surface-card-subtle: #ede7dc;
  --paper-warm: #f4efe7;
  --border-hairline: #c0b5a6;
  --hairline-subtle: #d8d0c5;

  /* Borders & Hairlines - Granite Hairline 1px (Tăng độ tương phản chống bệt) */
  --hairline: #c0b5a6;
  --hairline-medium: #b0a394;
  --hairline-strong: #928474;
  --hairline-coral: rgba(178, 90, 43, 0.45);

  /* Dimensions */
  --titlebar-height: 40px;
  --toolbar-height: 48px;
  --statusbar-height: 28px;
  --sidebar-width: 58px;

  /* Typography - Editorial & Precise */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Space Grotesk', 'Inter', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Zero-Radius Brutalism - 100% Sharp Corners */
  --radius-xs: 0px !important;
  --radius-sm: 0px !important;
  --radius-md: 0px !important;
  --radius-lg: 0px !important;
  --radius-xl: 0px !important;
  --radius-pill: 0px !important;

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== DARK THEME (Analog Charcoal Memorandum 2.0) ===== */
[data-theme="dark"] {
  --canvas: #161513;
  --surface-soft: #1d1b18;
  --surface-card: #22201c;
  --surface-card-hover: #2a2723;
  --surface-elevated: #262420;
  --surface-cream: #2a2723;
  --surface-cream-soft: #1d1b18;
  --surface-bg: #161513;
  --surface-hover: #2a2723;
  --surface-card-subtle: #1d1b18;
  --paper-warm: #22201c;

  --text-primary: #f4efe7;
  --text-high: #f4efe7;
  --text-base: #f4efe7;
  --text-secondary: #c8bfb4;
  --text-muted: #8e8880;
  --text-dim: #6c665f;
  --text-coral: #cf7e4c;

  --primary-coral: #cf7e4c;
  --primary-coral-hover: #db8a58;
  --primary-coral-active: #b56939;
  --primary-coral-subtle: rgba(207, 126, 76, 0.15);
  --primary-coral-border: rgba(207, 126, 76, 0.4);

  --accent-teal: #457873;
  --accent-amber: #b8732a;
  --accent-green: #3d7559;
  --accent-red: #9e4337;

  --hairline: #3c3832;
  --hairline-medium: #4e483f;
  --hairline-strong: #665f54;
  --hairline-subtle: #2d2924;
  --border-hairline: #3c3832;
  --hairline-coral: rgba(207, 126, 76, 0.5);
}

/* Light Theme Explicit Sync */
[data-theme="light"] {
  --canvas: #f4efe7;
  --surface-soft: #ede7dc;
  --surface-card: #fbf8f2;
  --surface-card-hover: #fffaf4;
  --surface-elevated: #fbf8f2;
  --surface-cream: #fffaf4;
  --surface-cream-soft: #f4efe7;
  --surface-bg: #f4efe7;
  --surface-hover: #ede7dc;
  --surface-card-subtle: #ede7dc;
  --paper-warm: #f4efe7;

  --text-primary: #1e1b18;
  --text-high: #1e1b18;
  --text-base: #1e1b18;
  --text-secondary: #4a453e;
  --text-muted: #6c665f;
  --text-dim: #8e8880;
  --text-coral: #b25a2b;

  --primary-coral: #b25a2b;
  --primary-coral-hover: #984b22;
  --primary-coral-active: #813c19;
  --primary-coral-subtle: rgba(178, 90, 43, 0.12);
  --primary-coral-border: rgba(178, 90, 43, 0.35);

  --accent-teal: #335d58;
  --accent-amber: #8c531b;
  --accent-green: #27523e;
  --accent-red: #83342b;

  --hairline: #c0b5a6;
  --hairline-medium: #b0a394;
  --hairline-strong: #928474;
  --hairline-subtle: #d8d0c5;
  --border-hairline: #c0b5a6;
}

/* Zero-Radius & Hairline Flat Styling Overrides */
.hero-intro-card,
.hub-card,
.methodology-step-card,
.advisory-card,
.landlord-info-card,
.landlord-form-card,
.faq-card,
.hub-modal-card,
.form-step-card,
.expert-profile-section,
.hub-hero-slider-wrap {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--hairline) !important;
  background: var(--surface-card) !important;
}

.hub-input,
.hub-select,
.hub-textarea {
  border-radius: 0 !important;
  border: 1px solid var(--hairline) !important;
  background: var(--surface-cream) !important;
  color: var(--text-primary) !important;
}

.hub-input:focus,
.hub-select:focus,
.hub-textarea:focus {
  border-color: var(--text-primary) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.hub-primary-btn,
.hero-action-btn,
.toolbar-btn,
.workspace-action-btn {
  border-radius: 0 !important;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: break-word;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(230, 223, 216, 0.14);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(204, 120, 92, 0.4);
}


/* ===== HIGH-SPEED SMOOTHNESS & MULTI-DEVICE PERFORMANCE TOKENS ===== */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

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

button, a, input, select, textarea, .hub-chip, .tool-card, .dossier-tab-link {
  touch-action: manipulation;
}

/* 60fps GPU Compositor Layer Promotion */
.mobile-app-header,
.site-hub-footer,
.hub-modal-card,
.youtube-player-frame {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Modern Content Visibility for Off-Screen Sections (Massive Paint/Layout Boost) */
.tools-directory-section,
.m-tools-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 900px;
}

.advisory-consultation-section,
.m-advisory-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 650px;
}

.landlord-outreach-section,
.m-landlord-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

.site-hub-footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 450px;
}