/* 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);

  /* light. Added 24 Aug 2026 to match the brand book, which had these and the
     stylesheet did not. Same brand, on paper rather than on the void: used for
     anything printed, exported, or read on a white ground. */
  --paper:#FBFAFD;  --paper-2:#F0EEF6;
  --ink:#14131C;    --ink-2:#4A4858;  --ink-3:#8B889C;
  --rule:#DEDBE8;
  /* 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)}

/* Vendored from ../../web/brand.css on 27 August 2026. The OS serves from its
   own root on its own host, so it cannot share the file, exactly as Boards
   cannot. If the tokens change there, copy them across. */