/* BarYield brand tokens: the single source for colours and logo geometry (README.md).
   Dark is the default. Light applies under :root[data-theme="light"]; the released dist/brand.css also
   follows prefers-color-scheme: light when <html> has no data-theme attribute (added by generate.py). */
:root {
  color-scheme: dark;
  --bg: #070C09;
  --bg-alt: #0A110D;
  --surface: #0E1611;
  --surface-2: #121C16;
  --hover: #16231B;
  --line: #19251E;
  --line-2: #243329;
  --text: #E9F1EC;
  --text-2: #B6C5BC;
  --muted: #80938A;
  --dim: #566A5F;
  --brand: #FFFFFF;
  --accent: #2ED47A;
  --accent-2: #25B868;
  --accent-text: #2ED47A;
  --accent-ink: #04140A;
  --accent-soft: rgba(46, 212, 122, .12);
  --logo: #15874D;
  --amber: #F0B43A;
  --amber-soft: rgba(240, 180, 58, .13);
  --red: #F0695E;
  --red-soft: rgba(240, 105, 94, .13);
  --blue: #5CB0EE;
  --blue-soft: rgba(92, 176, 238, .13);

  --font-sans: "Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Logo geometry (#273/#276). Lengths in em of the wordmark font-size F; H is the mark height. */
  --logo-gap: .2em;          /* mark right edge to wordmark */
  --logo-h: .73em;           /* mark height H = Inter cap height; bottom edge on the baseline */
  --logo-ls: -.035em;        /* wordmark letter-spacing */
  --logo-weight: 800;
  --logo-lh: 1.1;
  --logo-clear: var(--logo-h);       /* clear space 1 × H on all four sides */
  --logo-tagline: .5em;              /* tagline font-size */
  --logo-tagline-gap: var(--logo-h); /* baseline to tagline x-height top, 1 × H */
  --logo-min: 16px;                  /* smallest F for the full logo; below it the mark alone */
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-alt: #EBF1EC;
  --surface: #FFFFFF;
  --surface-2: #F1F4F1;
  --hover: #E6ECE7;
  --line: #DFE5E0;
  --line-2: #CFD7D1;
  --text: #1A2420;
  --text-2: #34423B;
  --muted: #5F7167;
  --dim: #8A978F;
  --brand: #000000;
  --accent-text: #137A45;
  --accent-soft: rgba(46, 212, 122, .16);
  --amber: #A86D00;
  --amber-soft: rgba(168, 109, 0, .10);
  --red: #C8402F;
  --red-soft: rgba(200, 64, 47, .10);
  --blue: #1F72B8;
  --blue-soft: rgba(31, 114, 184, .10);
}

/* No data-theme attribute on <html>: follow the system. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #FFFFFF;
    --bg-alt: #EBF1EC;
    --surface: #FFFFFF;
    --surface-2: #F1F4F1;
    --hover: #E6ECE7;
    --line: #DFE5E0;
    --line-2: #CFD7D1;
    --text: #1A2420;
    --text-2: #34423B;
    --muted: #5F7167;
    --dim: #8A978F;
    --brand: #000000;
    --accent-text: #137A45;
    --accent-soft: rgba(46, 212, 122, .16);
    --amber: #A86D00;
    --amber-soft: rgba(168, 109, 0, .10);
    --red: #C8402F;
    --red-soft: rgba(200, 64, 47, .10);
    --blue: #1F72B8;
    --blue-soft: rgba(31, 114, 184, .10);
  }
}

/* Logo lockup: <a class="by-logo"><svg>…logo-mark.svg…</svg><span>BarYield</span></a>
   (the wordmark is "BarYield", never with a trailing dot). Set font-size (F) on .by-logo. */
.by-logo { display: inline-flex; align-items: baseline; gap: var(--logo-gap); font-family: var(--font-sans); font-weight: var(--logo-weight); letter-spacing: var(--logo-ls); line-height: var(--logo-lh); color: var(--brand); text-decoration: none; white-space: nowrap; }
.by-logo svg { height: var(--logo-h); width: auto; flex: none; display: block; color: var(--logo); }