/* ============================================================
   FARCOM · HAWKEYE — "Sky Glass" design system (Phase D)
   Extracted from draft1-sky-glass.html. Light-first, frosted glass,
   sapphire primary, orange CTA-only, ink body, Inter stack, mono plates.
   Shared token + primitive source for all restyled Hawkeye boards.
   No external requests / CDNs — self-contained.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --white:#FFFFFF; --surface:#F8FAFC; --surface2:#eef3f9;
  --slate-50:#F8FAFC; --slate-500:#64748b;
  --sky-50:#f0f6fb; --sky-100:#D6E5F2; --sky:#D6E5F2;

  /* --- brand --- */
  --sapphire:#1A3D7C; --sapphire-700:#1A3D7C; --sapphire-600:#2454a0; --sapphire2:#24528f;
  --blue:#4878A8; --blue-500:#4878A8; --blue-400:#7fb3d5;
  --ink:#1A2744; --ink-900:#1A2744;
  --orange:#F05A28; --orange-500:#F05A28; --orange-100:#ffe4d6;

  /* --- support --- */
  --muted:#5b6b86; --line:#e2e8f2;
  --good:#1f9d63; --success-500:#10b981; --success-100:#d1fadf;
  --warn:#c9761d; --warning-500:#f59e0b; --danger:#C0392B;

  /* --- elevation --- */
  --shadow-sm:0 1px 2px 0 rgba(26,39,68,.08);
  --shadow-card:0 4px 12px 0 rgba(26,39,68,.10);
  --shadow-card-hover:0 12px 24px 0 rgba(26,39,68,.14);
  --shadow-float:0 8px 30px 0 rgba(26,39,68,.16);
  --shadow:0 1px 2px rgba(26,39,68,.06),0 4px 16px rgba(26,39,68,.06);

  /* --- radii --- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* --- type --- */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter','Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Outfit','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink-900); background:var(--slate-50);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
a{color:inherit; text-decoration:none;}

/* ============ FROSTED TOOLBAR / HEADER SHELL ============ */
.hk-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 380px at 78% -40%, rgba(72,120,168,.28), transparent 60%),
    radial-gradient(760px 300px at 8% -10%, rgba(26,61,124,.22), transparent 62%),
    linear-gradient(180deg, #eaf2fb 0%, #f4f9fd 62%, var(--slate-50) 100%);
  border-bottom:1px solid var(--sky-100);
}
.hk-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 42px, rgba(255,255,255,.35) 42px 43px);
  -webkit-mask:linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
          mask:linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  opacity:.5;
}
.hk-hero-inner{position:relative; z-index:1; max-width:1500px; margin:0 auto; padding:0 22px;}

.hk-toolbar{
  display:flex; align-items:center; gap:16px;
  margin-top:16px; padding:11px 16px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-lg); box-shadow:var(--shadow-float);
}
.hk-brand{display:flex; align-items:center; gap:12px; padding-right:16px; border-right:1px solid var(--sky-100);}
.hk-mark{width:34px; height:34px; background:#fff; border-radius:9px; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; box-shadow:0 1px 3px rgba(26,61,124,.22);}
.hk-mark img{width:24px; height:24px; display:block;}
.hk-brand-txt{display:flex; flex-direction:column; line-height:1;}
.hk-brand-txt b{font-family:var(--disp); font-weight:800; letter-spacing:.16em; font-size:13px; color:var(--sapphire-700);}
.hk-brand-txt span{font-size:10px; letter-spacing:.28em; color:var(--blue-500); font-weight:600; margin-top:3px;}
.hk-tb-title{font-family:var(--disp); font-weight:700; font-size:15px; color:var(--sapphire-700); letter-spacing:-.01em;}
.hk-tb-title small{display:block; font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--slate-500); letter-spacing:0; margin-top:2px;}
.hk-spacer{flex:1;}
.hk-navlink{padding:7px 13px; border-radius:var(--r-pill); font-weight:600; font-size:13px; color:var(--slate-500); transition:.15s; display:inline-flex; align-items:center; gap:6px;}
.hk-navlink:hover{background:rgba(26,61,124,.08); color:var(--sapphire-700);}
.hk-navlink:focus-visible{outline:2px solid var(--sapphire-600); outline-offset:2px;}

/* ============ SHARED TOP NAV (reusable across all boards) ============ */
.hk-toolbar{flex-wrap:wrap;}
.hk-nav{
  display:flex; align-items:center; gap:3px; flex-wrap:wrap;
  flex:1 1 auto; justify-content:flex-end; min-width:0;
}
.hk-nav a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:7px 13px; border-radius:var(--r-pill);
  font-weight:600; font-size:13px; color:var(--slate-500);
  text-decoration:none; transition:background .15s, color .15s, box-shadow .15s;
}
.hk-nav a:hover{background:rgba(26,61,124,.08); color:var(--sapphire-700);}
.hk-nav a:focus-visible{outline:2px solid var(--sapphire-600); outline-offset:2px;}
.hk-nav a.active,
.hk-nav a[aria-current="page"]{
  color:var(--sapphire-700); background:rgba(26,61,124,.10); font-weight:700;
  box-shadow:inset 0 -2px 0 0 var(--sapphire-700);
}
.hk-nav a.ext{color:var(--blue-500);}
.hk-nav a.ext:hover{color:var(--sapphire-700);}
.hk-nav a.sec{font-size:12px; color:var(--muted);}
.hk-nav a.sec:hover{color:var(--sapphire-700);}
@media (max-width:760px){
  .hk-nav{justify-content:flex-start; flex-basis:100%; margin-top:2px;}
}

.hk-live{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12px;
  letter-spacing:.04em; color:var(--sapphire-700); padding:7px 12px 7px 11px;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}
.hk-live .dot{width:9px; height:9px; border-radius:50%; background:var(--good); position:relative; animation:hk-pulse 1.9s infinite;}
.hk-live .dot.stale{background:var(--warn); animation:none;}
@keyframes hk-pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.5)}70%{box-shadow:0 0 0 7px rgba(31,157,99,0)}100%{box-shadow:0 0 0 0 rgba(31,157,99,0)}}
@media (prefers-reduced-motion:reduce){.hk-live .dot{animation:none;}}

.hk-cta{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  color:#fff; background:var(--orange-500); padding:9px 18px; border:0; cursor:pointer;
  border-radius:var(--r-pill); box-shadow:0 6px 16px rgba(240,90,40,.35); transition:.15s;
}
.hk-cta:hover{background:#d94a1e; transform:translateY(-1px); box-shadow:0 10px 22px rgba(240,90,40,.42);}
.hk-cta:focus-visible{outline:2px solid var(--orange-500); outline-offset:2px;}

.hk-tagline{max-width:1500px; margin:0 auto; padding:14px 22px 4px; color:var(--slate-500); font-size:13px;}

/* ============ GLASS KPI STRIP ============ */
.hk-kpis{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  max-width:1500px; margin:0 auto; padding:16px 22px 20px;
}
.hk-kpi{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.75); border-radius:var(--r-lg);
  padding:13px 15px; box-shadow:var(--shadow-card); transition:.18s;
}
.hk-kpi:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);}
.hk-kpi .k{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500);}
.hk-kpi .v{font-family:var(--disp); font-weight:800; font-size:24px; color:var(--sapphire-700); margin-top:5px; line-height:1;}
.hk-kpi .v.accent{color:var(--orange-500);}
.hk-kpi .v small{font-size:13px; color:var(--slate-500); font-weight:600;}
@media (max-width:820px){.hk-kpis{grid-template-columns:repeat(3,1fr);}}
@media (max-width:480px){.hk-kpis{grid-template-columns:repeat(2,1fr);}}

/* ============ SECTION SHELL ============ */
.hk-sec-head{display:flex; align-items:center; gap:12px; margin:0 0 14px;}
.hk-sec-head .bar{width:4px; height:20px; border-radius:2px; background:var(--orange-500);}
.hk-sec-head h2{font-family:var(--disp); font-weight:700; font-size:18px; color:var(--sapphire-700); margin:0; letter-spacing:-.01em;}
.hk-sec-head .count{font-size:12px; color:var(--slate-500); font-weight:600; margin-left:auto;}
.hk-eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-500); font-weight:700;}

/* ============ CARD / CHIP / BADGE / TABLE PRIMITIVES ============ */
.hk-card{
  background:var(--white); border:1px solid var(--sky-100); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card); overflow:hidden; transition:.18s;
}
.hk-card:hover{box-shadow:var(--shadow-card-hover);}

.hk-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--sapphire-700);
  background:var(--sky-100); border-radius:var(--r-pill); padding:3px 11px;
}
.hk-chip.util{background:#fff0d9; color:#8a5a12;}

.hk-badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.02em;}
.hk-badge.veh{background:var(--sky-100); color:var(--sapphire-700);}
.hk-badge.per{background:var(--orange-100); color:#b8431c;}

.hk-plate{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff;
  background:var(--ink-900); border-radius:var(--r-sm); padding:2px 8px; display:inline-flex; align-items:center;}

.hk-btn{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px;
  color:var(--sapphire-700); background:var(--white); border:1px solid var(--sky-100);
  border-radius:var(--r-md); padding:7px 13px; cursor:pointer; transition:.15s;
}
.hk-btn:hover{border-color:var(--blue-400); box-shadow:var(--shadow-sm);}
.hk-btn:focus-visible{outline:2px solid var(--sapphire-600); outline-offset:2px;}
.hk-btn.accent{background:var(--orange-500); color:#fff; border-color:var(--orange-500);}
.hk-btn.accent:hover{background:#d94a1e;}

.hk-foot{color:var(--slate-500); font-size:11.5px; text-align:center;}
.hk-foot .mono{color:var(--blue-500);}

/* ============ OPTIONAL DARK THEME (Sky Glass night) ============ */
:root[data-theme="dark"]{
  --white:#12203a; --surface:#0f1b2e; --surface2:#162641; --slate-50:#0f1b2e;
  --sky-50:#16264a; --sky-100:#1e3557; --sky:#1e3557;
  --ink:#e8eef8; --ink-900:#e8eef8; --muted:#93a6c4; --slate-500:#93a6c4;
  --line:#22375a;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.25);
  --shadow-card-hover:0 12px 30px rgba(0,0,0,.4);
}