/* =============================================================================
   BRAND TOKENS — CMMS Design System
   Source-of-truth for color, type, surface, badge, and component styles.
   Extracted from: desktop/screens/warranty-management.html
                   desktop/screens/national-accounts.html
                   desktop/components/*.html
                   mobile/components/*.html
                   email-templates/*.html
   Load order: AFTER Tailwind CDN (so utilities can be combined),
               BEFORE any per-page <style> block.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1 · CORE TOKENS  (CSS custom properties)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* — Brand palette — */
  --color-brand:           #1B3A6B;        /* Navy — primary, sidebar, CTAs */
  --color-brand-ink:       #16314f;        /* Brand gradient end */
  --color-brand-soft:      rgba(27, 58, 107, 0.06);
  --color-brand-soft-2:    rgba(27, 58, 107, 0.10);
  --color-brand-border:    rgba(27, 58, 107, 0.15);

  --color-amber:           #C8973A;        /* Warranty / preferred / accent */
  --color-amber-ink:       #a07327;        /* Amber-on-soft text */
  --color-amber-soft:      #fdf4e3;        /* Amber surface */
  --color-amber-soft-2:    rgba(200, 151, 58, 0.10);
  --color-amber-border:    #e9c477;

  /* — Ink / surface scale (slate-aligned) — */
  --color-ink-900:         #0f172a;        /* Body copy */
  --color-ink-700:         #334155;
  --color-ink-600:         #475569;
  --color-ink-500:         #64748b;
  --color-ink-400:         #94a3b8;        /* Mono micro-labels */
  --color-ink-300:         #cbd5e1;
  --color-ink-200:         #e2e8f0;
  --color-ink-100:         #f1f5f9;        /* Page bg base */
  --color-ink-50:          #f8fafc;        /* Card subtle bg */
  --color-white:           #ffffff;

  /* — Semantic / status colors — */
  --color-success:         #166534;
  --color-success-bg:      #dcfce7;
  --color-warning:         #b45309;
  --color-warning-bg:      #fff4e0;
  --color-warning-border:  #f6c878;
  --color-danger:          #991b1b;
  --color-danger-bg:       #fee2e2;
  --color-danger-border:   #fda4a4;
  --color-info:            #1d4ed8;
  --color-info-bg:         #dbeafe;

  --color-overdue:         #b91c1c;
  --color-pending:         #92400e;
  --color-pending-bg:      #fef3c7;
  --color-inprog:          #4338ca;
  --color-inprog-bg:       #e0e7ff;

  /* — Tier swatches (national accounts) — */
  --color-tier-gold-bg:       #fef3c7;
  --color-tier-gold-ink:      #92400e;
  --color-tier-silver-bg:       #dbeafe;
  --color-tier-silver-ink:      #1d4ed8;
  --color-tier-standard-bg:       #f1f5f9;
  --color-tier-standard-ink:      #475569;
  --color-tier-platinum-bg:  #eef2ff;       /* indigo-100 */
  --color-tier-platinum-ink: #3730a3;       /* indigo-700 */
  --color-tier-bronze-bg:    #ffedd5;       /* orange-100 */
  --color-tier-bronze-ink:   #9a3412;       /* orange-700 */

  /* — Type — */
  --font-sans:             'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:             'IBM Plex Mono', Menlo, Consolas, monospace;

  --fs-xs:                 10px;        /* mono micro-labels (uppercase) */
  --fs-sm:                 11px;        /* mono codes, captions */
  --fs-base:               12px;
  --fs-md:                 13px;        /* body */
  --fs-lg:                 14px;
  --fs-xl:                 17px;        /* card titles */
  --fs-2xl:                22px;        /* page H1 in emails */
  --fs-3xl:                28px;        /* hero numbers */

  --lh-tight:              1.2;
  --lh-snug:               1.35;
  --lh-base:               1.55;

  --tracking-widest:       0.14em;      /* uppercase mono labels */

  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

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

  /* — Radii — */
  --radius-sm:             4px;
  --radius:                8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-2xl:            20px;
  --radius-pill:           999px;
  --radius-device:         28px;        /* mobile phone frame */

  /* — Shadows — */
  --shadow-sm:             0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:                0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:             0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-2xl:            0 25px 50px rgba(15, 23, 42, 0.18);
  --shadow-inner-amber:    inset 0 0 0 1px rgba(200, 151, 58, 0.30);

  /* — Gradients — */
  --gradient-hero:         linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-ink) 100%);
  --gradient-amber-fade:   linear-gradient(to right, rgba(200,151,58,0.15) 0%, rgba(200,151,58,0.05) 60%, transparent 100%);

  /* — Density / layout — */
  --sidebar-w:             16rem;
  --header-h:              4rem;
  --mobile-w:              390px;

  /* — Role pill tokens (10 canonical roles) — */
  --role-owner-bg:                    #1B3A6B;
  --role-owner-ink:                   #ffffff;
  --role-owner-border:                #16314f;
  --role-maintenance-director-bg:     #fdf4e3;
  --role-maintenance-director-ink:    #a07327;
  --role-maintenance-director-border: #e9c477;
  --role-site-manager-bg:             #dbeafe;
  --role-site-manager-ink:            #1d4ed8;
  --role-site-manager-border:         #93c5fd;
  --role-dispatcher-bg:               #fef3c7;
  --role-dispatcher-ink:              #92400e;
  --role-dispatcher-border:           #fcd34d;
  --role-technician-bg:               #dcfce7;
  --role-technician-ink:              #166534;
  --role-technician-border:           #86efac;
  --role-inspector-bg:                #e0e7ff;
  --role-inspector-ink:               #4338ca;
  --role-inspector-border:            #c7d2fe;
  --role-requester-bg:                #f1f5f9;
  --role-requester-ink:               #475569;
  --role-requester-border:            #cbd5e1;
  --role-vendor-bg:                   #ffedd5;
  --role-vendor-ink:                  #c2410c;
  --role-vendor-border:               #fdba74;
  --role-procurement-bg:              #fff4e0;
  --role-procurement-ink:             #b45309;
  --role-procurement-border:          #f6c878;
  --role-auditor-bg:                  #f8fafc;
  --role-auditor-ink:                 #475569;
  --role-auditor-border:              #94a3b8;
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · BASE TYPE
   ───────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  color: var(--color-ink-900);
  -webkit-font-smoothing: antialiased;
}
.font-mono {
  font-family: var(--font-mono) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3 · BADGE CLASSES  (status pills — reused everywhere)
   Each badge is a 10px uppercase pill with mono number padding.
   ───────────────────────────────────────────────────────────────────────── */
.badge-critical   { background: var(--color-danger-bg);    color: var(--color-overdue); }
.badge-high       { background: #ffedd5;                   color: #c2410c; }
.badge-medium     { background: var(--color-pending-bg);   color: var(--color-pending); }
.badge-low        { background: var(--color-info-bg);      color: var(--color-info); }
.badge-routine    { background: var(--color-ink-100);      color: var(--color-ink-600); }

.badge-open       { background: var(--color-ink-100);      color: var(--color-ink-600); }
.badge-inprog     { background: var(--color-inprog-bg);    color: var(--color-inprog); }
.badge-complete   { background: var(--color-success-bg);   color: var(--color-success); }
.badge-pendpart   { background: var(--color-pending-bg);   color: var(--color-pending); }
.badge-overdue    { background: var(--color-danger-bg);    color: var(--color-overdue); }

/* Warranty / expiration tone (amber → orange → red) */
.badge-warranty   { background: var(--color-amber-soft);   color: var(--color-amber-ink);  border: 1px solid var(--color-amber-border); }
.badge-expiring   { background: var(--color-warning-bg);   color: var(--color-warning);    border: 1px solid var(--color-warning-border); }
.badge-expired    { background: var(--color-danger-bg);    color: var(--color-danger);     border: 1px solid var(--color-danger-border); }

/* Tier swatches (national accounts) */
.tier-A { background: var(--color-tier-gold-bg); color: var(--color-tier-gold-ink); }
.tier-B { background: var(--color-tier-silver-bg); color: var(--color-tier-silver-ink); }
.tier-C { background: var(--color-tier-standard-bg); color: var(--color-tier-standard-ink); }

/* ─────────────────────────────────────────────────────────────────────────
   4 · SUBTAB NAV
   ───────────────────────────────────────────────────────────────────────── */
.subtab-active   { border-bottom: 2px solid var(--color-brand); color: var(--color-brand); font-weight: var(--weight-semibold); }
.subtab-inactive { border-bottom: 2px solid transparent;        color: var(--color-ink-500); }
.subtab-inactive:hover { color: var(--color-brand); }

/* ─────────────────────────────────────────────────────────────────────────
   5 · SURFACE HELPERS
   ───────────────────────────────────────────────────────────────────────── */
.bg-amber-soft   { background-color: var(--color-amber-soft); }
.bg-amber-8      { background-color: var(--color-amber-soft-2); }
.bg-brand-soft   { background-color: var(--color-brand-soft); }

.bp-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(27, 58, 107, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ─────────────────────────────────────────────────────────────────────────
   6 · SCROLLBAR
   ───────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--color-ink-100); }
::-webkit-scrollbar-thumb   { background: var(--color-ink-400); border-radius: var(--radius-pill); }

/* ─────────────────────────────────────────────────────────────────────────
   7 · ALPINE / CLOAK
   ───────────────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }