/* ========================================================================== 
   LJOMLA — Official Brand Identity Layer
   Unified across desktop, mobile and PWA surfaces.
   Palette: 70% neutral / 20% emerald / 10% gold.
   ========================================================================== */

:root {
  /* Core brand */
  --brand-primary: #0B5D3B;
  --brand-primary-hover: #073D29;
  --brand-primary-light: #178457;
  --brand-primary-subtle: #EAF5EF;

  --brand-accent: #D99A2B;
  --brand-accent-hover: #A86F17;
  --brand-accent-light: #EAB654;
  --brand-accent-subtle: #FFF4D8;

  /* Neutral system */
  --text-main: #17212B;
  --text-muted: #667085;
  --text-light: #86909C;
  --text-inverse: #FFFFFF;

  --surface: #FFFFFF;
  --surface-alt: #F7F8F5;
  --surface-dark: #073D29;
  --surface-elevated: #FFFFFF;

  --border: #E2E7E4;
  --border-light: #E2E7E4;
  --border-medium: #C8D2CD;
  --border-focus: #0B5D3B;

  --focus-ring: 0 0 0 3px rgba(11, 93, 59, 0.24);

  /* Semantic aliases consumed by the existing design system */
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-hover);
  --primary-light: var(--brand-primary-light);
  --primary-subtle: var(--brand-primary-subtle);

  --accent: var(--brand-accent);
  --accent-dark: var(--brand-accent-hover);
  --accent-light: var(--brand-accent-light);
  --accent-subtle: var(--brand-accent-subtle);

  --bg-app: var(--surface-alt);
  --bg-surface: var(--surface);
  --bg-surface-elevated: var(--surface-elevated);
  --bg-muted: #EFF3F0;

  /* Keep operational states semantically distinct while harmonising pending */
  --status-pending: #D99A2B;
  --status-pending-bg: #FFF4D8;
  --status-pending-text: #7A4C0B;
}

html,
body {
  background: var(--bg-app);
  color: var(--text-main);
}

/* Header */
.top-header {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--border-light);
  box-shadow: 0 1px 3px rgba(23, 33, 43, 0.06);
}

.brand-logo {
  color: var(--primary);
}

.brand-icon {
  background: var(--primary);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(11, 93, 59, 0.14);
}

.header-cart-btn,
.header-help-btn,
.lang-switcher {
  border-color: var(--border-light);
}

.header-cart-btn {
  background: var(--surface);
}

.header-help-btn:hover,
.header-help-btn:focus-visible {
  background: var(--primary-subtle);
  color: var(--primary);
  border-color: rgba(11, 93, 59, 0.28);
}

.lang-btn:hover {
  color: var(--primary);
  background: var(--primary-subtle);
}

.lang-btn.active {
  background: var(--primary);
  color: #FFFFFF;
}

.cart-badge,
.nav-badge {
  background: var(--accent);
  color: #FFFFFF;
}

/* Core surfaces */
.card,
.product-card,
.form-card,
.summary-card,
.dashboard-card,
.stat-card {
  background: var(--surface);
  border-color: var(--border-light);
}

.card:hover,
.product-card:hover {
  border-color: #CAD9D1;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-outline {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--primary-subtle);
}

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #17212B;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #FFFFFF;
}

/* Product and marketplace emphasis */
.product-price {
  color: var(--accent-dark);
}

.badge-verified {
  background: var(--primary-subtle);
  color: var(--primary);
  border-color: #B9DDC9;
}

.badge-warning {
  background: var(--accent-subtle);
  color: #7A4C0B;
}

/* Navigation */
.bottom-nav {
  background: rgba(255, 255, 255, 0.98);
  border-top-color: var(--border-light);
  box-shadow: 0 -6px 20px rgba(23, 33, 43, 0.06);
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active .nav-icon {
  filter: saturate(1.05);
}

.nav-item-logout:hover,
.nav-item-logout:focus-visible {
  color: var(--primary);
}

/* Footer */
.site-footer {
  background: var(--surface);
  border-top-color: var(--border-light);
  color: var(--text-muted);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--primary) !important;
}

/* PWA install and Help Center branded surfaces */
#pwa-install-banner,
.help-hero-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #FFFFFF;
}

#pwa-install-banner p,
#pwa-install-banner div,
.help-hero-card p,
.help-hero-card h1,
.help-hero-card h2,
.help-hero-card h3 {
  color: inherit;
}

/* Inputs and controls */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Desktop-generated primary navigation uses the same identity */
.desktop-primary-nav-link {
  border-color: var(--border-light) !important;
}

.desktop-primary-nav-link:first-child {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border-color: var(--primary) !important;
}

.desktop-primary-nav-link:first-child:hover,
.desktop-primary-nav-link:first-child:focus-visible {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* Logout remains a destructive/exit action, deliberately not brand-green. */
.desktop-logout-btn {
  background: #FFF7F7 !important;
  color: #A61B1B !important;
  border-color: #F1C7C7 !important;
}

/* Mobile identity refinements */
@media (max-width: 768px) {
  .top-header {
    background: rgba(255, 255, 255, 0.98);
  }

  .bottom-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .nav-item.active {
    font-weight: 800;
  }
}

/* Desktop identity refinements */
@media (min-width: 769px), (hover: hover) and (pointer: fine) {
  .top-header {
    box-shadow: 0 2px 10px rgba(23, 33, 43, 0.06);
  }

  .site-footer {
    box-shadow: 0 -1px 0 var(--border-light);
  }
}