/* ==========================================================================
   Design Tokens & Base Component Styles — Light Mode Only
   Extracted from dark-mode.css v3, all dark mode code removed.
   Load this stylesheet LAST so token-driven overrides win the cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Light Mode Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg-primary: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-subtle: #F5F5F0;
  --bg-inverse: #080808;

  --text-primary: #080808;
  --text-secondary: #4A4A4A;
  --text-muted: #696969;
  --text-heading: #333333;
  --text-inverse: #FFFFFF;
  --text-on-accent: #1A1A1A;

  --accent: #FFB646;
  --accent-hover: #FF9330;
  --accent-subtle: rgba(255, 182, 70, 0.1);

  --border-default: rgba(8, 8, 8, 0.12);
  --border-subtle: rgba(8, 8, 8, 0.06);
  --border-strong: rgba(8, 8, 8, 0.25);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

  --surface-1: #FFFFFF;
  --surface-2: #F8F8F6;
  --surface-3: #F0F0EC;

  --btn-primary-bg: #080808;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: rgba(8, 8, 8, 0.4);
  --btn-primary-hover-bg: transparent;
  --btn-primary-hover-text: #080808;

  --btn-outline-bg: transparent;
  --btn-outline-text: #080808;
  --btn-outline-border: rgba(8, 8, 8, 0.4);
  --btn-outline-hover-bg: #080808;
  --btn-outline-hover-text: #FFFFFF;

  --input-bg: #FFFFFF;
  --input-border: rgba(8, 8, 8, 0.15);
  --input-text: #1A1A1A;
  --input-placeholder: #999;
  --input-focus-border: #FFB646;

  --success: #4CAF50;
  --error: #F44336;
  --warning: #FF9800;
  --info: #2196F3;

  --code-bg: #F5F5F0;
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-track: transparent;
  --skeleton-bg: #E0E0E0;
  --skeleton-shine: #F5F5F5;
}

/* --------------------------------------------------------------------------
   2. Base Components (token-driven)
   -------------------------------------------------------------------------- */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-muted);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-heading);
}

.hero-title {
  color: var(--text-primary);
}

a:hover {
  color: var(--accent);
}

.paragraph, p {
  color: var(--text-secondary);
}

.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border) !important;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
  border-color: var(--btn-primary-border) !important;
}

.btn-primary-outline {
  background-color: var(--btn-outline-bg) !important;
  color: var(--btn-outline-text) !important;
  border-color: var(--btn-outline-border) !important;
}

.btn-primary-outline:hover {
  background-color: var(--btn-outline-hover-bg) !important;
  color: var(--btn-outline-hover-text) !important;
  border-color: var(--btn-outline-border) !important;
}

.tab-btn {
  background-color: var(--bg-elevated, #FFFFFF);
  color: var(--text-primary);
}

.nav-link,
.menu-link {
  color: var(--text-primary);
}

.nav-link:hover,
.menu-link:hover {
  color: var(--accent);
}

/* Cards */
.card,
.project-card,
.service-card,
.blog-card,
.blog-item {
  background-color: var(--bg-card);
  border-color: var(--border-subtle);
}

.featured-properties {
  background-color: var(--bg-subtle);
}

/* Forms */
input,
textarea,
select,
.form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.circle-shape::before,
.section-title.circle-shape::before {
  background-color: var(--accent);
}

.fill-primary {
  fill: var(--accent);
}

.lock-overlay {
  background: var(--bg-overlay);
}

.lock-box {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::selection {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   3. Header Actions (navbar alignment — toggle removed)
   -------------------------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-inner,
.white-bg-header {
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Print
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
}