/* ═══════════════════════════════════════════════════════════════════
   NobleKeyz — canonical two-theme token system.
   Shared by all pages. Link this BEFORE the page's own <style> so
   tokens resolve to values before any inline rules apply.

     :root                → DARK (default; noir + gold luxury)
     [data-theme="light"] → LIGHT (white + civic blue contract)

   The pre-paint inline script in each page's <head> sets the
   data-theme attribute on <html> BEFORE first paint so the chosen
   theme is applied without a white flash.

   Semantic tokens:
     --primary / --primary-text / --primary-hover / --primary-tint
       The "branded primary" colour. Gold in dark, civic blue in light.
       Use this for primary buttons, sign-in CTAs, active states.
     --gold (+ -soft, -mid, -dim)
       Gold-identity elements. Stays gold in BOTH themes (slightly
       darkened in light for AA contrast). Use this for logo dots,
       in-progress indicators, gold ring effects.
     Status: --green / --amber / --red / --blue / --purple
       Each has -dim (background tint) and -text (foreground text)
       variants tuned for the active theme's surface luminance.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── DARK theme (noir + gold) — the default ── */

  /* Surfaces */
  --noir: #0a0a0f;
  --deep: #12121a;
  --card: #1c1c28;
  --card-hi: #252533;
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-faint: rgba(255,255,255,0.04);
  --hover-tint: rgba(255,255,255,0.02);
  --modal-overlay: rgba(0,0,0,0.72);

  /* Brand gold */
  --gold: #c9a84c;
  --gold-soft: #d4b860;
  --gold-mid: rgba(201,168,76,0.45);
  --gold-dim: rgba(201,168,76,0.12);
  --cream: #f5f0e8;

  /* Primary accent — gold in dark */
  --primary: #c9a84c;
  --primary-hover: #dfb964;
  --primary-text: #0a0a0f;
  --primary-tint: rgba(201,168,76,0.12);
  --primary-mid: rgba(201,168,76,0.45);

  /* Text */
  --text: #f0ede4;
  --text-strong: #ffffff;
  --subtle: rgba(255,255,255,0.78);
  --muted: rgba(255,255,255,0.62);
  --faint: rgba(255,255,255,0.42);

  /* Status colors — bright variants for dark-bg legibility */
  --green: #34d399;
  --green-dim: rgba(52,211,153,0.14);
  --green-text: #6ee7b7;
  --amber: #fbbf24;
  --amber-dim: rgba(251,191,36,0.14);
  --amber-text: #fcd34d;
  --red: #f87171;
  --red-dim: rgba(248,113,113,0.14);
  --red-text: #fca5a5;
  --blue: #7dd3fc;
  --blue-dim: rgba(125,211,252,0.14);
  --blue-text: #93c5fd;
  --purple: #c084fc;
  --purple-dim: rgba(168,85,247,0.12);

  /* Typography (same both themes) */
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Inputs & nav */
  --input-bg: #1c1c28;
  --input-text: #f0ede4;
  --nav-bg: rgba(10,10,15,0.94);

  /* Radius & shadow */
  --radius: 14px;
  --shadow: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 60px rgba(0,0,0,0.6);
}

[data-theme="light"] {
  /* ── LIGHT theme (white + civic blue) ── */

  /* Surfaces */
  --noir: #f1f5f9;
  --deep: #e2e8f0;
  --card: #ffffff;
  --card-hi: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-faint: rgba(15,23,42,0.06);
  --hover-tint: rgba(15,23,42,0.025);
  --modal-overlay: rgba(15,23,42,0.55);

  /* Brand gold — darkened for AA contrast on white */
  --gold: #b8963e;
  --gold-soft: #c9a84c;
  --gold-mid: rgba(184,150,62,0.35);
  --gold-dim: rgba(184,150,62,0.10);
  --cream: #0f172a;

  /* Primary accent — civic blue in light */
  --primary: #1d4ed8;
  --primary-hover: #1e3a8a;
  --primary-text: #ffffff;
  --primary-tint: #eff6ff;
  --primary-mid: rgba(29,78,216,0.35);

  /* Text */
  --text: #0f172a;
  --text-strong: #000000;
  --subtle: #334155;
  --muted: #475569;
  --faint: #94a3b8;

  /* Status colors — darker variants for light-bg legibility */
  --green: #16a34a;
  --green-dim: #dcfce7;
  --green-text: #15803d;
  --amber: #d97706;
  --amber-dim: #fef3c7;
  --amber-text: #92400e;
  --red: #dc2626;
  --red-dim: #fef2f2;
  --red-text: #991b1b;
  --blue: #1d4ed8;
  --blue-dim: #eff6ff;
  --blue-text: #1e3a8a;
  --purple: #7c3aed;
  --purple-dim: #f5f3ff;

  /* Inputs & nav */
  --input-bg: #ffffff;
  --input-text: #0f172a;
  --nav-bg: rgba(255,255,255,0.96);

  /* Shadow — softer, layered */
  --shadow: 0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);

  /* Offer-chain civic accents — tint variants for light bg */
  --offer-blue-tint: #eff6ff;
  --offer-blue-soft: #dbeafe;
  --offer-orange-tint: #fff7ed;
  --offer-orange-soft: #ffedd5;
}

/* ════════════════════════════════════════════════
   OFFER-CHAIN CIVIC ACCENTS — semantic colours for the
   contract negotiation surface (offer-chain.html). These
   stay CONSTANT in both themes so the contract panel
   keeps its civic identity (blue seller column, orange
   buyer column) regardless of the surrounding chrome.
   Only the tint variants flip per-theme above.
   ════════════════════════════════════════════════ */
:root {
  --offer-blue-deep: #1e3a8a;
  --offer-blue: #1d4ed8;
  --offer-blue-light: #3b82f6;
  --offer-orange: #ea580c;
  --offer-orange-mid: #f97316;
  /* Dark-theme tint variants — alpha so the civic colour shows through noir */
  --offer-blue-tint: rgba(30,58,138,0.10);
  --offer-blue-soft: rgba(30,58,138,0.22);
  --offer-orange-tint: rgba(234,88,12,0.08);
  --offer-orange-soft: rgba(234,88,12,0.18);
}

/* Smooth theme transitions on the most-visible surfaces */
html { color-scheme: dark light; }
body, .topnav, nav, .card, .kpi, .vtl-card, .m-section, .gantt-bar,
.outstanding-wrap, .subtask-row, .engage-modal, .modal, .userchip-pop,
input, select, textarea, button {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* ════════════════════════════════════════════════
   Theme toggle button — sits in every page's topnav
   ════════════════════════════════════════════════ */
.theme-toggle-btn {
  background: var(--card);
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
  line-height: 1;
  color: var(--text);
  padding: 0;
  font-family: inherit;
}
.theme-toggle-btn:hover {
  border-color: var(--primary);
  transform: scale(1.08);
}

/* ============================================================
   Mobile overflow hardening — added 2026-05-30
   Stops horizontal scroll/zoom on phones from the usual causes:
   wide data tables, oversized media, and long unbreakable strings.
   No overflow:hidden clipping, so nothing gets hidden; desktop
   layout is untouched (rules apply only <=700px).
   ============================================================ */
@media (max-width: 700px) {
  /* Wide tables scroll inside their own box instead of widening the page */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Media never exceeds the screen width */
  img, video, canvas { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  /* Long unbroken tokens (URLs, hashes, IDs) wrap rather than push width.
     Note: this does NOT override white-space:nowrap, so intentional
     single-line content (e.g. prices) stays on one line. */
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
