/**
 * AdHub.la Design Tokens
 * Extracted from banner.png + avatar.png (Phase 1)
 * Primary = banner petrol blue; Accent gold = Hub pill / cultural gold.
 */

:root {
  /* Brand */
  --ah-brand-name: "AdHub.la";
  --ah-primary: #15444c;
  --ah-primary-rgb: 21, 68, 76;
  --ah-primary-hover: #1c5863;
  --ah-primary-pressed: #10383e;
  --ah-primary-soft: rgba(21, 68, 76, 0.1);
  --ah-primary-border: rgba(21, 68, 76, 0.28);

  --ah-accent: #c79236;
  --ah-accent-rgb: 199, 146, 54;
  --ah-accent-hover: #d4a34a;
  --ah-accent-soft: rgba(199, 146, 54, 0.14);
  --ah-accent-border: rgba(199, 146, 54, 0.35);

  --ah-ink: #1d5763;
  --ah-sky: #507498;

  /* Surfaces */
  --ah-bg: #f5f7f8;
  --ah-surface: #ffffff;
  --ah-surface-muted: #eef2f3;
  --ah-border: #d8e0e3;
  --ah-border-strong: #b8c5ca;

  /* Text */
  --ah-text: #12262b;
  --ah-text-secondary: #5a6f76;
  --ah-text-muted: #7a8f96;
  --ah-text-on-primary: #ffffff;
  --ah-text-on-accent: #ffffff;

  /* Nav / chrome */
  --ah-nav-bg: #15444c;
  --ah-nav-text: #ffffff;
  --ah-nav-muted: rgba(255, 255, 255, 0.82);
  --ah-nav-hover: rgba(255, 255, 255, 0.1);

  /* Shape */
  --ah-radius-sm: 8px;
  --ah-radius-md: 12px;
  --ah-radius-lg: 16px;
  --ah-radius-pill: 999px;
  --ah-radius-card: 14px;

  /* Elevation */
  --ah-shadow-sm: 0 1px 2px rgba(18, 38, 43, 0.05);
  --ah-shadow-md: 0 4px 14px rgba(18, 38, 43, 0.08);
  --ah-shadow-lg: 0 12px 32px rgba(18, 38, 43, 0.12);
  --ah-shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Typography — một scale cho Overview · Analysis · Ad accounts · AAD */
  --ah-font-sans: "Be Vietnam Pro", "Noto Sans Lao", "Noto Sans", system-ui, sans-serif;
  --ah-font-display: "Be Vietnam Pro", "Noto Sans Lao", sans-serif;
  --ah-font-size-base: 15px;
  --ah-line-tight: 1.25;
  --ah-line-body: 1.55;
  --ah-tracking-label: 0.04em;
  --ah-tracking-tight: -0.02em;

  /* Type scale (rem @ 15px base) */
  --ah-fs-label: 0.72rem;      /* KPI label, table th, badge uppercase */
  --ah-fs-meta: 0.8rem;        /* footnote, muted helper */
  --ah-fs-sm: 0.8125rem;       /* table td, btn sm, secondary */
  --ah-fs-body: 0.875rem;      /* page body */
  --ah-fs-tab: 0.875rem;       /* underline tabs */
  --ah-fs-sub: 0.875rem;       /* greet subtitle */
  --ah-fs-card: 0.95rem;       /* panel / card title */
  --ah-fs-kpi: 1.25rem;        /* KPI / metric value */
  --ah-fs-title: 1.35rem;      /* page greet title */

  --ah-fw-regular: 400;
  --ah-fw-medium: 500;
  --ah-fw-semibold: 600;
  --ah-fw-bold: 700;

  /* Spacing scale */
  --ah-space-1: 0.25rem;
  --ah-space-2: 0.5rem;
  --ah-space-3: 0.75rem;
  --ah-space-4: 1rem;
  --ah-space-5: 1.5rem;
  --ah-space-6: 2rem;
  --ah-space-8: 3rem;

  /* Mobile bottom bar (Phase 5) */
  --ah-bottom-nav-height: 64px;
  --ah-bottom-nav-offset: env(safe-area-inset-bottom, 0px);

  /* Legacy aliases → map old Facebook-era vars to AdHub */
  --fb-blue: var(--ah-primary);
  --fb-blue-hover: var(--ah-primary-hover);
  --logo-green: var(--ah-accent);
  --accent-green: var(--ah-accent);
  --hero-bg-start: #10383e;
  --hero-bg-mid: #15444c;
  --hero-bg-end: #1c5863;
  --bg-primary: var(--ah-bg);
  --bg-white: var(--ah-surface);
  --bg-nav: var(--ah-nav-bg);
  --bg-nav-hover: var(--ah-nav-hover);
  --text-primary: var(--ah-text);
  --text-secondary: var(--ah-text-secondary);
  --text-nav: var(--ah-nav-text);
  --text-nav-muted: var(--ah-nav-muted);
  --border-color: var(--ah-border);
  --border-nav: rgba(255, 255, 255, 0.12);
  --ui-input-pill: var(--ah-radius-pill);
  --ui-textarea-radius: var(--ah-radius-lg);
  --ui-input-border: 1px solid var(--ah-border);
  --ui-input-bg: var(--ah-surface);
  --ui-input-focus: var(--ah-primary);
  --ui-input-focus-ring: 0 0 0 3px var(--ah-primary-soft);
  --ui-btn-pill: var(--ah-radius-pill);
  --ent-panel-radius: var(--ah-radius-card);
  --ent-panel-border: 1px solid var(--ah-border);
  --ent-panel-shadow: var(--ah-shadow-sm);
  --ent-table-head-bg: var(--ah-surface-muted);

  /* Bootstrap bridge (optional consumers) */
  --bs-primary: var(--ah-primary);
  --bs-primary-rgb: var(--ah-primary-rgb);
  --bs-link-color: var(--ah-primary-hover);
  --bs-link-hover-color: var(--ah-primary-pressed);
}

/* Logo wordmark: Ad + Hub.la gold pill */
.ah-logo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--ah-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ah-ink);
  text-decoration: none;
}

.ah-logo-wordmark .ah-logo-ad {
  color: inherit;
}

.ah-logo-wordmark .ah-logo-hub {
  display: inline-flex;
  align-items: center;
  padding: 0.18em 0.55em 0.22em;
  border-radius: var(--ah-radius-pill);
  background: var(--ah-accent);
  color: var(--ah-text-on-accent);
}

.ah-logo-wordmark--on-dark {
  color: var(--ah-text-on-primary);
}

.ah-logo-wordmark--on-dark .ah-logo-ad {
  color: var(--ah-text-on-primary);
}

.ah-logo-wordmark--on-dark .ah-logo-hub {
  background: var(--ah-accent);
  color: #fff;
}

/* Utility helpers for Phase 3+ */
.ah-btn-primary {
  background: var(--ah-primary);
  border-color: var(--ah-primary);
  color: var(--ah-text-on-primary);
}

.ah-btn-primary:hover {
  background: var(--ah-primary-hover);
  border-color: var(--ah-primary-hover);
  color: var(--ah-text-on-primary);
}

.ah-btn-accent {
  background: var(--ah-accent);
  border-color: var(--ah-accent);
  color: var(--ah-text-on-accent);
}

.ah-btn-accent:hover {
  background: var(--ah-accent-hover);
  border-color: var(--ah-accent-hover);
  color: var(--ah-text-on-accent);
}

/* Language switcher — no emoji flags (avoids broken encoding + font fallback) */
.ah-lang-menu {
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 12px;
  overflow: hidden;
}

.ah-lang-item {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
  border-radius: 8px !important;
  padding: 0.55rem 0.7rem !important;
  font-family: var(--ah-font-sans);
}

.ah-lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: var(--ah-primary-soft);
  color: var(--ah-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dropdown-menu-dark .ah-lang-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ah-lang-label {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.ah-lang-item.active .ah-lang-badge {
  background: var(--ah-accent);
  color: #fff;
}

.dropdown-menu-dark .ah-lang-item.active {
  background: rgba(199, 146, 54, 0.22);
}