/* ============================================================
   tokens.css — AqarHawk's one colour source
   ============================================================
   Shared by the agent console (/console), the public pages (the
   unified report, «اعرف سعر شقتك», the buyer link, the certificate)
   and the admin screen. No page writes a colour of its own: every
   rule reads var(--…) from here.

   The values are Agent Intelligence's (dashboard/agent_intel.html):
   navy and blue in dark, white and blue in light, so the console and
   the analyst dashboard read as one product. Four steps differ from
   agent_intel.html, each to pass WCAG AA for text (4.5:1), checked by
   tests/test_ui_tokens.py:
     --primary (dark)  #3B82F6 → #2563EB  white on #3B82F6 is 3.7:1;
                                          #3B82F6 stays as --viz-accent
     --success (light) #16A34A → #15803D  (agent_intel's own pill ink)
     --warning (light) #F59E0B → #B45309  (agent_intel's own pill ink)
     --danger  (light) #DC2626 → #B91C1C  (agent_intel's own pill ink)

   Dark is the default; <html data-theme="light"> selects light. The
   choice («داكن / فاتح / حسب الجهاز») is resolved to one of the two
   before first paint by the page's boot script, which also follows
   the device while the setting is «حسب الجهاز».
   ============================================================ */

:root {
  color-scheme: dark;
  /* Surfaces */
  --bg:#0B1220; --surface:#131D30; --surface-2:#1A2640; --border:#243149;
  /* Text */
  --text:#E8EDF7; --muted:#9FADC4; --hint:#8494AE;
  /* Accent */
  --primary:#2563EB; --primary-hover:#1D4ED8; --on-primary:#FFFFFF;
  --primary-soft:rgba(59,130,246,.16); --primary-ink:#93C5FD;
  /* Status — each with a translucent wash for chips on either surface */
  --success:#22C55E; --success-soft:rgba(34,197,94,.14);
  --warning:#F59E0B; --warning-soft:rgba(245,158,11,.14);
  --danger:#F87171;  --danger-soft:rgba(248,113,113,.14);
  --info:#60A5FA;    --info-soft:rgba(96,165,250,.14);
  /* Chrome */
  --overlay:rgba(2,6,16,.62);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.24);
  --shadow-lg:0 20px 60px rgba(0,0,0,.50);
  --brand-mark-bg:#FFFFFF;
  --brand-accent:#3B82F6;   /* «Hawk» in the wordmark, as on Agent Intelligence */
  --focus-ring:#60A5FA;

  /* Charts — the Agent Intelligence blues.
     You vs the market (grouped share bars): strong blue vs a light
     tint of it. Checked with the dataviz validator on #131D30: CVD
     ΔE 20.2, normal ΔE 20.9, both ≥ 3:1. The tint sits outside the
     categorical lightness band by design (it is context, not a peer
     series); every bar prints its value and the pair has a legend.
     Below / fair / above market: blue ↔ gray midpoint ↔ red. */
  --viz-accent:#3B82F6; --viz-market:#93C5FD; --viz-grid:#243149;
  --viz-below:#3B82F6;  --viz-fair:#475569;   --viz-above:#F87171;
  --viz-1:#3B82F6; --viz-2:#93C5FD; --viz-3:#1D4ED8; --viz-4:#DBEAFE;

  /* Portals: identity dots beside a portal's name only. Presence bars
     use --viz-accent for every portal (a red bar would read as "bad"). */
  --portal-aqarmap:#F59E0B; --portal-bayut:#22C55E; --portal-propertyfinder_eg:#EF4444;
  --portal-dubizzle:#8B5CF6; --portal-4swapp:#06B6D4; --portal-opensooq:#F97316;
  --portal-nawy:#3B82F6; --portal-ureeg:#14B8A6; --portal-nileestate:#2F6F4F;
  --portal-yamlock:#B0578D; --portal-having_market:#9C6ADE; --portal-storiaproperty:#2E8B8B;
  --portal-lesoll:#94A3B8; --portal-aqaryamasr:#64748B; --portal-btlee:#4E79A7;
  --portal-aqar_masr:#78716C; --portal-other:#94A3B8;

  /* The market-share certificate: a fixed dark card in both themes, since
     the same element is saved as the shared image. Navy with a blue glow
     and a gold rank, in place of the old violet. */
  --cert-glow:#1E3A8A; --cert-mid:#131D30; --cert-edge:#0B1220; --cert-border:#2A4A8F;
  --gold:#F5C451; --gold-line:rgba(245,196,81,.28);

  /* A QR code (auth-onboarding §7.5) is scanned from paper and screens
     alike: dark on light in both themes. */
  --qr-ink:#0B1220; --qr-bg:#FFFFFF;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#E2E8F0;
  --text:#0F172A; --muted:#475569; --hint:#5B6B80;
  --primary:#2563EB; --primary-hover:#1D4ED8; --on-primary:#FFFFFF;
  --primary-soft:#EFF6FF; --primary-ink:#1D4ED8;
  --success:#15803D; --success-soft:#F0FDF4;
  --warning:#B45309; --warning-soft:#FFFBEB;
  --danger:#B91C1C;  --danger-soft:#FEF2F2;
  --info:#1D4ED8;    --info-soft:#EFF6FF;
  --overlay:rgba(15,23,42,.45);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 20px 50px rgba(15,23,42,.18);
  --focus-ring:#2563EB;
  --brand-accent:#2563EB;
  /* Light surface #FFFFFF: you #1D4ED8 vs market #60A5FA passes every
     categorical check (CVD ΔE 21.8, normal 23.9); the tint is under
     3:1 and relies on its printed value, as in dark. */
  --viz-accent:#1D4ED8; --viz-market:#60A5FA; --viz-grid:#E2E8F0;
  --viz-below:#2563EB;  --viz-fair:#CBD5E1;   --viz-above:#DC2626;
  --viz-1:#1D4ED8; --viz-2:#60A5FA; --viz-3:#1E3A8A; --viz-4:#BFDBFE;
}

/* Printing always uses the light palette, whatever the screen shows. */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#E2E8F0;
    --text:#0F172A; --muted:#475569; --hint:#5B6B80;
    --primary-ink:#1D4ED8; --primary-soft:#EFF6FF;
    --success:#15803D; --warning:#B45309; --danger:#B91C1C;
  }
}