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