/* Vendored from adboard-agents/web/brand.css on 18 Aug 2026.
   Adboard Boards runs as its own service on its own host, so it cannot
   share the file. If the brand tokens change there, copy them here.
   Do not edit the values below in place. */
/* Adboard brand tokens. Single source of truth.
   Read out of index.html on 8 Aug 2026 and agreed as the reference.
   Documented in the vault at Adboard/BRAND.md.

   Import this. Never copy these values into a page's own <style> block:
   a page that holds its own copy is a page that goes wrong the first time
   one of them changes. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ground */
  --void:#07070A;            --void-2:#0B0B10;
  /* glass and edges. Cards are white at low opacity, never a grey fill,
     which is why they work on top of the aurora. */
  --glass:rgba(255,255,255,.035);  --glass-2:rgba(255,255,255,.06);
  --edge:rgba(255,255,255,.09);    --edge-hi:rgba(255,255,255,.16);
  /* text. Three levels, never four. */
  --tx:#EDEDF4;  --tx-2:#8E8FA3;  --tx-3:#55566B;
  /* accent. Colour carries meaning here and is never decorative. */
  --vio:#8B7CFF; --vio-hi:#B4AAFF; --vio-soft:rgba(139,124,255,.14);
  --cyan:#5FE8D0;                  --cyan-soft:rgba(95,232,208,.12);
  --lime:#D7F55A;                  --lime-soft:rgba(215,245,90,.12);
  --pink:#F27BB2;
  --neg:#FF6B5E;                   --neg-soft:rgba(255,107,94,.13);
  --warn:#FFB454;                  --warn-soft:rgba(255,180,84,.13);
  /* shape */
  --r:20px; --r2:14px; --r3:10px;
  /* type. Sora for what a person wrote, mono for what a machine measured. */
  --ui:'Sora',system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,monospace;
  /* glow. A thing that glows is alive or ready for you. */
  --focus:0 0 0 4px rgba(139,124,255,.12), 0 10px 40px rgba(139,124,255,.10);
  --focus-tight:0 0 0 3px rgba(139,124,255,.09);
  --live:0 0 18px rgba(139,124,255,.35);
  --mark:0 0 26px rgba(139,124,255,.4);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--void); color:var(--tx);
  font:300 16px/1.62 var(--ui);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}

/* The aurora. Fixed, behind everything, never behind text directly. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(139,124,255,.24), transparent 62%),
    radial-gradient(900px 560px at 96% 6%,   rgba(95,232,208,.11),  transparent 60%);
}
body > *{position:relative; z-index:1}

/* type */
h1{font-size:clamp(26px,4vw,36px); font-weight:600; letter-spacing:-.03em; line-height:1.14}
h2{font-size:19px; font-weight:600; letter-spacing:-.015em}
h3{font-size:16px; font-weight:500}
.mono,.data{font-family:var(--data)}
.label{font-family:var(--data); font-size:11px; letter-spacing:.14em;
       text-transform:uppercase; color:var(--tx-3); font-weight:400}
.dim{color:var(--tx-2)}
.figure{font-weight:700; font-family:var(--data)}   /* the one number that matters */

/* surfaces */
.card{background:var(--glass); border:1px solid var(--edge); border-radius:var(--r2);
      padding:16px 18px; transition:.15s}
.card:hover{border-color:var(--edge-hi); transform:translateY(-2px)}
.panel{background:var(--glass); border:1px solid var(--edge); border-radius:var(--r); padding:22px 24px}

/* controls */
.btn{background:linear-gradient(100deg,var(--vio),var(--vio-hi)); color:#0A0A12;
     border:0; border-radius:var(--r2); padding:11px 20px;
     font:500 14px var(--ui); cursor:pointer; transition:.15s}
.btn:hover{box-shadow:var(--live)}
.btn-ghost{background:var(--glass); color:var(--tx); border:1px solid var(--edge);
           border-radius:var(--r2); padding:11px 20px; font:400 14px var(--ui); cursor:pointer}
input,textarea,select{background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r2); color:var(--tx); font:300 15px var(--ui);
  padding:12px 14px; outline:none; transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--vio); box-shadow:var(--focus)}

/* status. Cyan is healthy, amber is waiting on you, coral is losing money.
   Never reassign these. */
.pill{display:inline-block; padding:5px 12px; border-radius:999px;
      font-family:var(--data); font-size:11px; border:1px solid var(--edge); color:var(--tx-2)}
.pill.good{background:var(--cyan-soft); border-color:rgba(95,232,208,.32); color:var(--cyan)}
.pill.wait{background:var(--warn-soft); border-color:rgba(255,180,84,.32); color:var(--warn)}
.pill.bad {background:var(--neg-soft);  border-color:rgba(255,107,94,.32);  color:var(--neg)}

/* brand mark stand-in until the logo is done */
.mark{width:22px; height:22px; border-radius:6px;
      background:linear-gradient(135deg,var(--vio),var(--cyan)); box-shadow:var(--mark)}