/* ═══════════════════════════════════════════════════════════════════════
   Theme A — "كحلي اللوقو" (board card 14, 2026-09-05)
   Adopted site-wide on 2026-09-05; loaded after shared.css on every public page.
   It changes tokens, type and colour only. Layout, spacing and markup are
   untouched, so every page keeps its structure.

   Three colour languages, each with one meaning everywhere:
     direction  → warm rises (#D93A5C), cool falls (#2F7DD9), grey flat
     type       → أراضي #4F9D69 · بيوت #1F6FEB · شقق #B8479E · عمارات #D97B1A
     action + emphasis → the site's blue #051CC9 (owner preferred it over the logo navy, 2026-09-05)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* type */
  --font-primary: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Noto Kufi Arabic", "Tajawal", sans-serif;
  --font-mono: "Noto Kufi Arabic", "Tajawal", sans-serif;   /* numbers are no longer monospace */

  /* surfaces: cool grey ground, white panels, hairline borders, no card shadows */
  --surface-base: #F4F6FA;
  --surface-card: #FFFFFF;
  --surface-elevated: #EEF1F6;
  --surface-input: #FFFFFF;
  --neutral-50: #F4F6FA;
  --neutral-100: #EEF1F6;
  --neutral-200: #E3E8F0;
  --neutral-300: #CBD3E0;
  --neutral-400: #6B7690;
  --neutral-500: #55607A;
  --neutral-600: #3E4860;
  --neutral-700: #2B3550;
  --neutral-800: #16213E;
  --neutral-900: #0F1730;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 6px 18px rgba(22,33,62,0.06);
  --shadow-lg: none;
  --shadow-xl: 0 16px 40px rgba(22,33,62,0.10);
  --glow-blue: none;
  --glow-warm: none;

  /* brand: navy for emphasis, logo blue for actions */
  --primary-50: rgba(5,28,201,0.05);
  --primary-100: rgba(5,28,201,0.10);
  --primary-200: #DEE2F8;
  --primary-300: #8A9AEE;
  --primary-400: #051CC9;
  --primary-500: #051CC9;
  --primary-600: #0414A0;
  --primary-700: #051CC9;
  --primary-800: #0F1E4D;
  --primary-900: #0B1440;
  --accent-50: rgba(5,28,201,0.05);
  --accent-100: rgba(5,28,201,0.10);
  --accent-200: rgba(5,28,201,0.16);
  --accent-300: #5B6BE0;
  --accent-400: #2035D0;
  --accent-500: #051CC9;
  --accent-600: #0414A0;
  --accent-700: #08399A;
  --accent-800: #062B74;
  --accent-900: #041D4E;
  --brand-gradient: linear-gradient(135deg, #051CC9, #0414A0);

  /* the old "warm" (orange) role becomes the logo's cyan */
  --warm-50: rgba(0,169,214,0.06);
  --warm-100: rgba(0,169,214,0.10);
  --warm-200: rgba(0,169,214,0.18);
  --warm-300: #7FDDF3;
  --warm-400: #2FC3E6;
  --warm-500: #00A9D6;
  --warm-600: #0090B8;
  --warm-700: #00748F;
  --warm-800: #005368;
  --warm-900: #003341;

  /* direction (temperature), used by every delta on the site */
  --delta-up: #D93A5C;
  --delta-up-light: rgba(217,58,92,0.10);
  --delta-down: #2F7DD9;
  --delta-down-light: rgba(47,125,217,0.10);
  --delta-flat: #6B7690;

  /* semantic (system messages only) */
  --success: #1F7A4D;
  --success-light: rgba(31,122,77,0.12);
  --danger: #B3413F;
  --danger-light: rgba(179,65,63,0.12);
  --info: #00A9D6;
  --info-light: rgba(0,169,214,0.12);

  /* property-type colours (CVD-validated) */
  --type-land: #4F9D69;
  --type-house: #1F6FEB;
  --type-apt: #B8479E;
  --type-bldg: #D97B1A;

  /* charts read these from JS */
  --chart-bar: #051CC9;
  --chart-bar-soft: #051CC9;   /* solid site blue; the translucent indigo was disliked (owner, 2026-09-05) */
  --chart-line: #00A9D6;
  --chart-line-soft: rgba(0,169,214,0.10);
  --chart-grid: rgba(22,33,62,0.06);

  --radius-lg: 12px;
  --radius-xl: 14px;
}

/* ── type ─────────────────────────────────────────────────────────── */
body.theme-a { font-family: var(--font-primary); font-variant-numeric: tabular-nums lining-nums; color: var(--neutral-800); }
body.theme-a h1, body.theme-a h2, body.theme-a h3, body.theme-a .card h2,
body.theme-a .kpi-value, body.theme-a .gov-count, body.theme-a .top-txn-price, body.theme-a .recent-price,
body.theme-a .cta-title, body.theme-a .brand-ar { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
body.theme-a .card h2 { font-size: 1.05rem; color: var(--neutral-800); }
body.theme-a .kpi-label { font-weight: 500; color: var(--neutral-400); }

/* ── header ───────────────────────────────────────────────────────── */
body.theme-a .top-nav { background: rgba(255,255,255,0.96); border-bottom-color: var(--neutral-200); box-shadow: none; }
body.theme-a .nav-links a { color: var(--neutral-500); font-weight: 600; border-bottom: 0; margin-bottom: 0; padding: 0.55rem 0.8rem; border-radius: 8px; }
body.theme-a .nav-links a:hover { color: var(--neutral-800); background: var(--neutral-100); }
body.theme-a .nav-links a.active { color: var(--primary-500); background: #EEF2FD; }
body.theme-a .nav-badge-new { background: var(--warm-500); border-radius: 999px; font-weight: 700; }
body.theme-a .top-nav .nav-search { background: var(--neutral-100); border-color: transparent; }
body.theme-a .top-nav .nav-search:focus-within { background: #fff; border-color: var(--accent-300); box-shadow: 0 0 0 3px var(--accent-100); }

/* ── hero KPIs: white, one navy rule, numbers in navy ─────────────── */
body.theme-a .hero-kpis { box-shadow: none; border-color: var(--neutral-200); background: var(--surface-card); }
body.theme-a .hero-kpi:nth-child(n) { background: transparent; }
body.theme-a .hero-kpi::before { background: var(--primary-500); left: 24%; right: 24%; height: 3px; }
body.theme-a .hero-kpi:nth-child(4)::before { background: var(--warm-500); }
body.theme-a .hero-kpi .kpi-value, body.theme-a .hero-kpi:nth-child(2) .kpi-value, body.theme-a .hero-kpi:nth-child(3) .kpi-value { color: var(--primary-500); font-size: 1.9rem; }
body.theme-a .hero-kpi:not(:last-child)::after { background: linear-gradient(180deg, transparent, var(--neutral-200), transparent); }

/* ── direction colours (temperature) everywhere ──────────────────── */
body.theme-a .up, body.theme-a .kpi-trend-val.up, body.theme-a .kpi-change.up, body.theme-a .change.up, body.theme-a .pi-badge.up { color: var(--delta-up) !important; }
body.theme-a .down, body.theme-a .kpi-trend-val.down, body.theme-a .kpi-change.down, body.theme-a .change.down, body.theme-a .pi-badge.down { color: var(--delta-down) !important; }
body.theme-a .pi-badge.up { background: var(--delta-up-light) !important; }
body.theme-a .pi-badge.down { background: var(--delta-down-light) !important; }
body.theme-a .kpi-change.muted, body.theme-a .kpi-trend-val.muted { color: var(--delta-flat) !important; }

/* ── cards & lists ────────────────────────────────────────────────── */
body.theme-a .card { box-shadow: none; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); }
body.theme-a .card h2::before, body.theme-a .section-title::before { background: var(--primary-500); }
body.theme-a .top-area-item { background: var(--surface-base); border-right: 3px solid var(--primary-500); }
body.theme-a .top-area-rank { background: var(--primary-500); color: #fff; }
body.theme-a .top-txn-card { box-shadow: none; }
body.theme-a .top-txn-card.top-txn-rank-1, body.theme-a .top-txn-card.top-txn-rank-2, body.theme-a .top-txn-card.top-txn-rank-3 { border-right-color: var(--primary-500); }
body.theme-a .top-txn-rank-1 .top-txn-rank, body.theme-a .top-txn-rank-2 .top-txn-rank, body.theme-a .top-txn-rank-3 .top-txn-rank { background: var(--primary-500); color: #fff; }
body.theme-a .top-txn-price, body.theme-a .recent-price, body.theme-a .gov-count { color: var(--primary-500); }
body.theme-a .gov-card { box-shadow: none; border: 1px solid var(--neutral-200); border-right: 3px solid var(--primary-500); }
body.theme-a .gov-card:nth-child(n) { border-right-color: var(--primary-500); }
body.theme-a .gov-share-fill, body.theme-a .gov-card:nth-child(n) .gov-share-fill { background: var(--primary-500); }
body.theme-a .recent-card { box-shadow: none; border: 1px solid var(--neutral-200); }
body.theme-a .cta-card { box-shadow: none; border: 1px solid var(--neutral-200); }
body.theme-a .cta-card:hover { border-color: var(--accent-300); box-shadow: var(--shadow-md); }
body.theme-a .cta-icon { background: #EEF2FD; color: var(--primary-500); }

/* ── controls ─────────────────────────────────────────────────────── */
body.theme-a button.primary { background: var(--accent-500); box-shadow: none; border-radius: 8px; }
body.theme-a button.primary:hover { background: var(--accent-600); box-shadow: none; transform: none; }
body.theme-a button.light, body.theme-a .top-txn-period { border-color: var(--neutral-200); }
body.theme-a .top-txn-period.active { background: var(--primary-500); color: #fff; }
body.theme-a select, body.theme-a input[type="date"], body.theme-a input[type="number"], body.theme-a input[type="text"] { border-color: var(--neutral-300); border-radius: 8px; }
body.theme-a select:focus, body.theme-a input:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
body.theme-a .help-tip { background: var(--neutral-100); color: var(--neutral-500); }

/* ── ticker & footer ──────────────────────────────────────────────── */
body.theme-a .ticker { background: var(--primary-500); } /* the site's blue, as before (owner, 2026-09-05) */
body.theme-a .site-footer { background: transparent; color: var(--neutral-500); border-top: 1px solid var(--neutral-200); }

/* ── homepage intent cards (replace "استكشف المزيد" in the preview) ── */
body.theme-a .intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
body.theme-a .intent-card { display: flex; flex-direction: column; gap: 0.35rem; background: var(--surface-card); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; color: var(--neutral-800); text-decoration: none; min-height: 132px; transition: border-color .15s ease; }
body.theme-a .intent-card:hover { border-color: var(--accent-300); }
body.theme-a .intent-q { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--neutral-800); }
body.theme-a .intent-a { color: var(--neutral-500); font-size: var(--text-sm); line-height: 1.55; }
body.theme-a .intent-go { margin-top: auto; padding-top: 0.5rem; color: var(--primary-500); font-weight: 700; font-size: var(--text-sm); }
body.theme-a .intent-go::after { content: " ←"; }
body.theme-a .intent-search { border-color: var(--primary-200); background: #F7F9FF; }
body.theme-a .intent-row { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
body.theme-a .intent-row input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--neutral-300); border-radius: 8px; padding: 0 0.75rem; font: inherit; font-size: var(--text-base); background: #fff; appearance: none; -webkit-appearance: none; }
body.theme-a .intent-row input:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
body.theme-a .intent-row button { height: 40px; padding: 0 1rem; border-radius: 8px; }
@media (max-width: 900px) { body.theme-a .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body.theme-a .intent-grid { grid-template-columns: 1fr; } }

/* ── other pages: retire the leftover multi-colour accents ─────────── */
/* professionals */
body.theme-a .activity-kpi:nth-child(n) { border-top-color: var(--primary-500); box-shadow: none; }
body.theme-a .activity-kpi:nth-child(n) .kpi-value { color: var(--primary-500); }
body.theme-a .timing-gauge { background: linear-gradient(to left, var(--delta-down), #C9D1DE 50%, var(--delta-up)) !important; } /* buyers' market cool → sellers' market warm */
body.theme-a .timing-label-buyer, body.theme-a .timing-score-label.buyer { color: var(--delta-down); }
body.theme-a .timing-label-seller, body.theme-a .timing-score-label.seller { color: var(--delta-up); }
body.theme-a .timing-signal-value.up { color: var(--delta-up); }
body.theme-a .timing-signal-value.down { color: var(--delta-down); }
body.theme-a .momentum-panel h3.hot { color: var(--delta-up); }
body.theme-a .momentum-panel h3.cold { color: var(--delta-down); }
body.theme-a .momentum-item .change.up { color: var(--delta-up); }
body.theme-a .momentum-item .change.down { color: var(--delta-down); }
/* buyers */
body.theme-a .rank-badge { background: var(--neutral-100); color: var(--neutral-600); }
body.theme-a .rank-badge.top3 { background: var(--primary-500); color: #fff; }
body.theme-a .val-trend.up { color: var(--delta-up); }
body.theme-a .val-trend.down { color: var(--delta-down); }
/* map side list */
body.theme-a .area-card::before, body.theme-a .area-card[data-gov]::before { background: var(--primary-500) !important; }
body.theme-a .popup-stat-value.deals { color: var(--primary-500); }
/* area page hero (copied from the homepage) */
body.theme-a .hero-kpi:nth-child(n) .kpi-value { color: var(--primary-500); }
body.theme-a .hero-kpi:nth-child(n)::before { background: var(--primary-500); }
body.theme-a .page-area .hero-kpi:nth-child(3)::before { background: var(--warm-500); }
body.theme-a .area-card-stat.deals .area-card-stat-value, body.theme-a .area-card-stat.avg .area-card-stat-value, body.theme-a .area-card-stat.total .area-card-stat-value, body.theme-a .popup-stat-value.total { color: var(--primary-500); }

/* notes that sit BELOW a chart or table need breathing room (the class was designed to sit under an h2) */
body.theme-a .chart-card + .section-context, body.theme-a .chart-wrapper + .section-context, body.theme-a .table-wrapper + .section-context,
body.theme-a .feed-table-wrapper + .section-context, body.theme-a #piNote, body.theme-a #lastMonth { margin-top: 1rem; }
