/* vela-theme.css — the shared VELA design tokens for every page of the hub.
   Each page links this first, then its own <style>. Pages keep their own
   component rules but draw every colour, font, radius and shadow from here,
   so all six dashboards read as one product in both light and dark mode.

   Identity: VELA is a sail; the agencies are named after stars. A
   navigator's chart and logbook — cool chart-paper surfaces, deep-sea navy
   ink, brass gold reserved for targets and milestones, Fraunces for titles
   and headline figures. */

:root{
  --bg:#F2F4F8;
  --surface:#FFFFFF;
  --surface-2:#F5F7FB;
  --surface-3:#EBEFF6;
  --border:#DCE2EC;
  --border-strong:#C4CDDD;
  --text:#0F1B33;
  --text-muted:#4B5770;
  --text-faint:#76819A;

  --navy:#0B1F4B;
  --navy-2:#16316F;
  --ink:#0B1F4B;           /* navy as a text colour — flips to near-white in dark mode */
  --accent:#2F5BD3;
  --accent-hover:#2349B0;
  --accent-soft:#E7EDFB;
  --on-accent:#FFFFFF;     /* text on an accent-filled button */
  --primary:#0B1F4B;       /* the one main button on a screen: navy by day, bright blue at night */
  --primary-hover:#16316F;
  --on-primary:#FFFFFF;
  --gold:#9A7020;          /* brass, text-safe on light surfaces */
  --gold-fill:#C89B3C;     /* the logo's brass, for fills and marks */
  --gold-soft:#F6EEDB;

  --success:#1D7A4E;  --success-soft:#E2F2E9;
  --warning:#A55F0A;  --warning-soft:#FBEFD8;
  --critical:#B63A2B; --critical-soft:#FBE5E1;
  /* categorical colours (per-tool dots, pipeline stages, charts) */
  --purple:#6B4FA0;   --purple-soft:#EFEAF7;
  --teal:#257880;     --teal-soft:#E0F1F2;
  --indigo:#4652C2;   --indigo-soft:#E8EAF8;

  --on-band:#F3F6FC;        /* text on the navy header band */
  --on-band-muted:#B9C6E2;
  --band:#0B1F4B;
  --band-line:rgba(200,155,60,.38);

  --radius-lg:16px;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(11,31,75,.06),0 2px 6px rgba(11,31,75,.04);
  --shadow-lg:0 14px 36px rgba(11,31,75,.16),0 2px 8px rgba(11,31,75,.06);
  --focus:0 0 0 3px rgba(47,91,211,.35);

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* No monospace: figures use the body face with tabular numerals, so
     peso columns line up without the typewriter look. */
  --font-mono:var(--font-body);

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#07112A; --surface:#0E1B39; --surface-2:#122344; --surface-3:#182C52;
    --border:#223660; --border-strong:#304A7A;
    --text:#E7ECF6; --text-muted:#A5B1C9; --text-faint:#7486A6;
    --navy:#0B1F4B; --navy-2:#16316F; --ink:#E7ECF6;
    --accent:#86A7F6; --accent-hover:#A3BDF9; --accent-soft:#1A2E5E; --on-accent:#07112A; --primary:#86A7F6; --primary-hover:#A3BDF9; --on-primary:#07112A;
    --gold:#E2B75E; --gold-fill:#C89B3C; --gold-soft:#302612;
    --success:#62CC98; --success-soft:#11362A;
    --warning:#EFB45A; --warning-soft:#382A10;
    --critical:#F28C7D; --critical-soft:#40201C;
    --purple:#B8A2E6; --purple-soft:#2A2148;
    --teal:#6CC7CE;   --teal-soft:#113236;
    --indigo:#9CA5F2; --indigo-soft:#222A58;
    --band:#0A1838;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
    --shadow-lg:0 16px 40px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.35);
    --focus:0 0 0 3px rgba(134,167,246,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07112A; --surface:#0E1B39; --surface-2:#122344; --surface-3:#182C52;
  --border:#223660; --border-strong:#304A7A;
  --text:#E7ECF6; --text-muted:#A5B1C9; --text-faint:#7486A6;
  --navy:#0B1F4B; --navy-2:#16316F; --ink:#E7ECF6;
  --accent:#86A7F6; --accent-hover:#A3BDF9; --accent-soft:#1A2E5E; --on-accent:#07112A; --primary:#86A7F6; --primary-hover:#A3BDF9; --on-primary:#07112A;
  --gold:#E2B75E; --gold-fill:#C89B3C; --gold-soft:#302612;
  --success:#62CC98; --success-soft:#11362A;
  --warning:#EFB45A; --warning-soft:#382A10;
  --critical:#F28C7D; --critical-soft:#40201C;
  --purple:#B8A2E6; --purple-soft:#2A2148;
  --teal:#6CC7CE;   --teal-soft:#113236;
  --indigo:#9CA5F2; --indigo-soft:#222A58;
  --band:#0A1838;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.35);
  --focus:0 0 0 3px rgba(134,167,246,.4);
  color-scheme:dark;
}

/* ---- base ---- */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums;
}
h1,h2,h3{font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-.01em;font-weight:600}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:var(--accent-soft)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- the navy chart band (every page's header) ----
   A faint line joining five stars — one per agency — traced in brass at
   the right edge. The one decorative element in the system. */
.vela-band{
  background-color:var(--band);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-opacity='.42' stroke-width='1'%3E%3Cpath d='M28 86 L96 52 L150 74 L214 30 L292 58'/%3E%3C/g%3E%3Cg fill='%23E2C27A'%3E%3Ccircle cx='28' cy='86' r='2.2'/%3E%3Ccircle cx='96' cy='52' r='3'/%3E%3Ccircle cx='150' cy='74' r='2'/%3E%3Ccircle cx='214' cy='30' r='3.4'/%3E%3Ccircle cx='292' cy='58' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:auto 78%;
  color:var(--on-band);
}
/* On phones the header text fills the band, so the stars step aside. */
@media (max-width:640px){.vela-band{background-image:none!important}}
:root[data-theme="dark"] .vela-band{box-shadow:inset 0 0 0 1px var(--border)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vela-band{box-shadow:inset 0 0 0 1px var(--border)}}

/* ---- passcode screen (every dashboard page) ---- */
.vela-gate{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;font-family:var(--font-body)}
.vela-gate-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px 28px 26px;width:100%;max-width:340px;text-align:center}
.vela-gate-card img{width:104px;height:104px;margin:0 auto 14px;display:block}
.vela-gate-card h2{font-size:22px;margin:0 0 6px;color:var(--ink)}
.vela-gate-card p{margin:0 0 18px;font-size:14px;color:var(--text-muted)}
.vela-gate-card input{width:100%;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:inherit;font-size:15px;text-align:center;letter-spacing:.06em;margin-bottom:10px;box-sizing:border-box}
.vela-gate-card .gate-unlock-btn{width:100%;padding:11px 12px;margin-top:4px;border-radius:var(--radius-sm);border:none;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:background-color .15s ease}
.vela-gate-card .gate-unlock-btn:hover{background:var(--primary-hover)}
.vela-gate-err{color:var(--critical);font-size:13px;min-height:18px;margin-top:8px}