/* ============================================================
   Inspecto — Design Tokens (single source of truth)
   Poore plugin ki UI ka color/shape/spacing yahan se aata hai.
   Kisi bhi CSS ya inline <style> mein raw hex mat likho —
   var(--ic-green) etc. use karo. Ek jagah badla → sab badla.

   Loaded globally on every admin page + frontend (see
   inspecto-connector.php enqueue). Scoped to :root so it is
   available everywhere including inside inline <style> blocks.
============================================================ */
:root{
  /* ── Brand ─────────────────────────────── */
  --ic-navy:#1C1650;        /* headings, dark surfaces, primary text */
  --ic-navy-deep:#0b0640;   /* extra-dark headings (hero)            */
  --ic-green:#22C55E;       /* primary / active / success           */
  /* #16a34a tha — safed likhaayi us par 3.30:1, aur ye token poore admin
     mein primary button, active tab aur badge ka BACKGROUND hai (das se
     zyada rules) sath hi ghost button ka TEXT bhi. Token gehra karne se
     dono kirdaar ek sath theek ho jate hain. */
  --ic-green-dark:#15803d;  /* primary bg + text (safed par 5.02:1)  */
  --ic-magenta:#E40886;     /* accent / recommended / highlight     */
  --ic-blue:#2563eb;        /* booking section accent               */
  --ic-violet:#7c3aed;      /* "in progress" — blue se alag rehna zaroori */
  --ic-blue-dark:#1d4ed8;   /* booking hover                        */
  /* WhatsApp ka apna brand green #25D366 safed par sirf 1.9:1 deta hai —
     glyph ke liye bhi kamzor. Un ka gehra sabz lete hain (4.1:1). */
  --ic-wa:#128C7E;          /* WhatsApp icon                        */
  --ic-wa-tint:#e6f6f3;     /* WhatsApp button hover fill           */

  /* ── Status (inspection report / form) ──── */
  --ic-pass:#16a34a;
  --ic-weak:#f59e0b;
  --ic-fail:#dc2626;
  --ic-na:#6b7280;

  /* ── Neutrals / surfaces ─────────────────── */
  --ic-ink:#0f172a;         /* body text                */
  --ic-ink-soft:#334155;    /* secondary text / labels  */
  --ic-muted:#64748b;       /* muted captions           */
  /* Legacy naam — ab naye scale par alias hain, taake poore plugin mein
     sirf AIK hairline aur AIK surface rahe (pehle 7 alag chal rahe thay). */
  --ic-border:var(--ic-hairline);
  --ic-border-soft:var(--ic-hairline);
  --ic-bg:var(--ic-surface);
  --ic-card:#ffffff;        /* card / panel surface     */

  /* ── Tinted status backgrounds (chips/boxes) */
  --ic-pass-bg:#dcfce7;
  --ic-weak-bg:#fffbeb;
  --ic-weak-bd:#fde68a;
  --ic-fail-bg:#fee2e2;

  /* ── Status chip pairs (bg + ink) ─────────
     Har module inhi ko use karta hai, is liye "Pending" badge Bookings,
     Jobs aur Invoices — teenon jagah bilkul aik jaisa dikhta hai. */
  --ic-warn-bg:#fef3c7;   --ic-warn-ink:#92400e;
  --ic-info-bg:#dbeafe;   --ic-info-ink:#1d4ed8;
  --ic-danger-bg:#fee2e2; --ic-danger-ink:#991b1b;
  --ic-danger-soft:#fef2f2; --ic-danger-bd:#fecaca;
  --ic-green-hover:#f6fdf9;

  /* ── Extra neutrals ─────────────────────── */
  --ic-line-strong:#cbd5e1; /* stronger divider / disabled border */
  --ic-ink-3:#475569;       /* tertiary text                      */
  /* MUTED RAMP — teenon 4.5:1 par poore utarte hain, safed AUR page ke
     tinted background (#f1f4f7) dono par. Farq ab bhi nazar aata hai
     (45% / 40% / 34% lightness), magar koi darja itna halka nahi ke
     padha na ja sake.
     Pehle: faint #aab4c0 = 1.90:1, muted-2 #8896a5 = 2.74:1,
     faint-2 #64748b = 4.31:1 (tinted par) — in mein record ke id,
     invoice number, plate aur column headings likhe jate hain. */
  --ic-faint-2:#4b5563;     /* small print (7.56 / 6.85)          */

  /* ── Green ramp (primary actions) ─────────── */
  --ic-green-soft:#f0fdf4;  /* ghost button / tinted strip bg   */
  --ic-green-bd:#dcf0e6;    /* ghost button border              */
  --ic-green-tint:#dcfce7;  /* hover fill / success chip bg     */
  --ic-green-deep:#116631;  /* pressed / hover (green-dark se gehra) */
  --ic-green-ink:#166534;   /* text on a green tint             */

  /* ── Surfaces & hairlines ─────────────────
     Pehle 7 alag grey chal rahe thay (#e5e7eb #eef1f6 #e2e8f0 #eef2f7
     #e4eae5 #e3e8ee #f3f4f6). Ab sirf ye teen — isi se "aik plugin" lagta hai. */
  --ic-hairline:#e8edf1;    /* har border / divider ki default  */
  --ic-hairline-soft:#f2f5f8;/* row divider, sab se halka       */
  --ic-surface:#fafbfc;     /* table head, inset panel          */
  --ic-surface-2:#f5f7f9;   /* chip / quiet fill                */

  /* ── Text ramp ───────────────────────────── */
  --ic-ink-2:#1e293b;       /* table cell heading text          */
  --ic-muted-2:#566579;     /* sub-label, meta      (5.94 / 5.38) */
  --ic-faint:#627184;       /* column labels, ph    (4.98 / 4.51) */
  --ic-dash:#c3cbd4;        /* the "—" empty marker             */

  /* ── Shape: 4 steps + pill (pehle 18 the) ── */
  --ic-radius-xs:9px;       /* buttons, chips                   */
  --ic-radius-sm:10px;      /* small controls                   */
  --ic-radius:12px;         /* rows, inset blocks               */
  --ic-radius-lg:16px;      /* cards, page panels               */
  --ic-radius-pill:999px;

  /* ── Type scale (pehle 20 sizes the) ─────── */
  --ic-fs-xs:11px;          /* meta, sub-labels                 */
  --ic-fs-sm:12.5px;        /* buttons, secondary text          */
  --ic-fs-base:13.5px;      /* body / table cells               */
  --ic-fs-md:15px;          /* card titles                      */
  --ic-fs-lg:17px;          /* section headings                 */
  --ic-fs-xl:22px;          /* page title                       */
  --ic-fs-label:10.5px;     /* uppercase column labels          */

  /* ── Spacing ─────────────────────────────── */
  --ic-gap-xs:6px;
  --ic-gap-sm:10px;
  --ic-gap:14px;
  --ic-gap-lg:18px;

  /* ── Elevation ───────────────────────────── */
  --ic-shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --ic-shadow:0 12px 30px rgba(15,23,42,.06);
  --ic-shadow-lg:0 14px 30px rgba(15,23,42,.08);
  --ic-shadow-green:0 4px 12px -4px rgba(22,163,74,.55);

  /* ── Focus ring (accessible) ─────────────── */
  --ic-focus:0 0 0 3px rgba(34,197,94,.15);
}

/* Modules apni palette define nahi karte — wo in tokens ko
   var(--ic-x, fallback) ke zariye pick karte hain (dekho workforce.css ka
   :root block). Is tarah load order chahe kuch bhi ho, rang aik hi rehta hai. */