/* AI.CONTACTIQ — Foundations
 * Color and typography tokens, lifted from the production app (index.html)
 * and the executive deck (build_competitive_deck.js). Two surfaces share
 * one type system but flip light/dark for the deck.
 * ---------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Type ─────────────────────────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Base size in the app is a deliberately tight 13px — info-dense. */
  --fs-xs:    10px;   /* uppercase eyebrows, micro-meta             */
  --fs-sm:    11px;   /* chips, labels, table micro-copy            */
  --fs-base:  12px;   /* dropdowns, buttons, secondary copy         */
  --fs-md:    13px;   /* default body / app shell                   */
  --fs-lg:    15px;   /* logo wordmark, modal field values          */
  --fs-xl:    17px;   /* modal entity name                          */
  --fs-2xl:   22px;   /* intel-tile counters (mono)                 */
  --fs-3xl:   26px;   /* cluster panel hero count (mono)            */
  --fs-4xl:   32px;   /* deck slide titles                          */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-normal:1.45;
  --lh-loose: 1.55;

  --tracking-tight: -0.02em;   /* display titles, big counts */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;     /* eyebrow labels             */
  --tracking-wider: 0.06em;    /* tab labels, table headers  */

  /* ── Color · Surface (light app) ──────────────────────────────────── */
  --bg:   #ffffff;
  --bg-2: #f8fafc;             /* hover, table head, chip rest        */
  --bg-3: #f1f5f9;             /* deeper hover, badge rest            */

  /* ── Color · Foreground ───────────────────────────────────────────── */
  --fg-1: #0f172a;             /* primary text — deep slate-navy      */
  --fg-2: #475569;             /* secondary text                       */
  --fg-3: #94a3b8;             /* tertiary / placeholder               */

  /* ── Color · Border ───────────────────────────────────────────────── */
  --border-1: rgba(15, 23, 42, 0.08);   /* hairlines           */
  --border-2: rgba(15, 23, 42, 0.15);   /* control borders     */

  /* ── Color · Accent (the brand blue) ──────────────────────────────── */
  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-bg:     #eff6ff;
  --accent-border: #bfdbfe;

  /* ── Color · Semantic ─────────────────────────────────────────────── */
  --green:    #15803d;
  --green-bg: #dcfce7;
  --amber:    #b45309;
  --amber-bg: #fef3c7;
  --red:      #b91c1c;
  --red-bg:   #fee2e2;

  /* Highlight / mark */
  --highlight: #fef08a;

  /* Source-pill palette (each ingestion source gets its own hue) */
  --src-npi:        #2563eb;
  --src-irs:        #15803d;
  --src-business:   #6366f1;
  --src-sba:        #0891b2;
  --src-hedge:      #7c3aed;
  --src-attorney:   #0f766e;
  --src-fed:        #dc2626;
  --src-uschamber:  #ea580c;
  --src-chambermem: #be185d;
  --src-government: #475569;
  --src-nyc-dca:    #0d9488;
  --src-nyc-bid:    #b91c1c;

  /* Industry tint — used as 14% bg under industry chips/icons */
  --ind-healthcare:  #2563eb;
  --ind-legal:       #475569;
  --ind-finance:     #15803d;
  --ind-nonprofit:   #be185d;
  --ind-tech:        #6366f1;
  --ind-realestate:  #b45309;

  /* ── Color · Deck (dark / executive) ──────────────────────────────── */
  /* Inverted surface used in the competitive-positioning PPTX. */
  --deck-bg:        #0f172a;
  --deck-panel:     #1e293b;
  --deck-panel-2:   #152033;
  --deck-text:      #f1f5f9;
  --deck-text-dim:  #94a3b8;
  --deck-border:    #334155;
  --deck-accent:        #f59e0b;   /* gold rule + hero */
  --deck-accent-deep:   #b45309;
  --deck-accent-soft:   #fef3c7;
  --deck-check: #10b981;
  --deck-x:     #dc2626;

  /* ── Spacing (4px grid) ───────────────────────────────────────────── */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-16: 32px;
  --sp-20: 40px;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────── */
  /* The app is intentionally low-shadow; lifts come from menus + panels. */
  --shadow-1: 0 2px 8px rgba(15, 23, 42, 0.08);                       /* status pills */
  --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.08);                      /* search suggest */
  --shadow-3: 0 4px 20px rgba(0, 0, 0, 0.10);                         /* dropdown menu */
  --shadow-4: 0 8px 40px rgba(0, 0, 0, 0.14);                         /* modal */
  --shadow-drawer: -8px 0 40px rgba(0, 0, 0, 0.08);                   /* right drawer */
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.08);                  /* focus ring */

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    .12s;
  --dur:         .15s;
  --dur-slow:    .22s;
  --dur-slower:  .28s;
}

/* ── Semantic type recipes ───────────────────────────────────────────── */
/* Use these classes on real text to keep the system consistent. */

.t-display     { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h1          { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h2          { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lg);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-body        { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-md);  line-height: var(--lh-loose); color: var(--fg-1); }
.t-body-sm     { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-base);line-height: var(--lh-loose); color: var(--fg-2); }
.t-meta        { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm);  line-height: var(--lh-snug);  color: var(--fg-2); }
.t-caption     { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm);  line-height: var(--lh-snug);  color: var(--fg-3); }

/* Eyebrow / section label — uppercased, tracked. Used liberally above sections in the modal. */
.t-eyebrow     { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xs);  line-height: var(--lh-tight); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }

/* Mono is the language of facts — IDs, numbers, parcel data, big counts. */
.t-mono        { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-2); }
.t-mono-stat   { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--accent); }
.t-mono-tile   { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--fg-1); }

/* Logo wordmark recipe: "AI.CONTACTIQ" — the dot is the only colored character. */
.t-logo        { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-logo .dot   { color: var(--accent); }

/* Map "code" pill (state code in the state-stats overlay) */
.t-code-pill   { font-family: var(--font-mono); font-size: 0.78em; color: var(--fg-2); letter-spacing: 0.02em; }