/* Dumpster Brain — brand.css
   ---------------------------------------------------------------------
   The one design-token file for every page in this product. Colors,
   type, spacing, radii and the standard controls (buttons, inputs,
   chips, cards, tables, empty states, toasts, focus rings) all live
   here so no page can quietly drift from the others.

   Source of record: public/my.html's own tokens (the customer
   dashboard shipped first and set the palette). my.html and
   public/index.html do not link this file yet — that lands in part 2.
   Every other page (login, my-bills, backtest, the marketing site, and
   the seal/bills server-rendered pages) either links this file or
   mirrors its values.

   A page may add its own <style> block for layout and one-off
   components; it should never redefine a color as a literal hex value
   — add or reuse a token here instead. */

:root {
  color-scheme: light dark;

  /* ---- surfaces ---- */
  --bg: #F4F6F3;
  --bg-tint: #EDF1EC;
  --panel: #EDF1EC;
  --card: #FFFFFF;

  /* ---- ink (text) ---- */
  --ink: #16201A;
  --ink-2: #4E5A50;
  --ink-3: #7B8880;

  /* ---- lines ---- */
  --line: #DCE3DA;
  --line-strong: #C3CDBF;
  --chip: #E9EEE6;

  /* ---- brand green: the product's own accent, "good" state ---- */
  --accent: #1F6E4C;
  --accent-ink: #14523A;
  --accent-soft: #E1F0E6;
  --accent-fg: #FFFFFF;

  /* ---- amber: caution / "worth a look" ---- */
  --amber: #9A6B12;
  --amber-soft: #FBF0DA;

  /* ---- red: trouble / "needs attention" ---- */
  --red: #B3402C;
  --red-soft: #FBE7E1;

  /* ---- blue: informational, and the outward marketing accent ---- */
  --blue: #2451A6;
  --blue-ink: #17346F;
  --blue-soft: #E4EBF8;
  --blue-fg: #FFFFFF;

  /* ---- type ---- */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- elevation ---- */
  --shadow: 0 1px 2px rgba(20, 30, 22, 0.06), 0 8px 24px -12px rgba(20, 30, 22, 0.18);
  --shadow-lg: 0 4px 10px rgba(20, 30, 22, 0.08), 0 24px 48px -20px rgba(20, 30, 22, 0.28);

  /* ---- shape ---- */
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1160px;

  /* ---- focus ---- */
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10140F;
    --bg-tint: #151A13;
    --panel: #151A13;
    --card: #181F17;
    --ink: #E9EEE6;
    --ink-2: #B4C0AF;
    --ink-3: #7E8B7E;
    --line: #2B342A;
    --line-strong: #3A4538;
    --chip: #202920;
    --accent: #6FCB9A;
    --accent-ink: #9BE0BD;
    --accent-soft: #163726;
    --accent-fg: #08150F;
    --amber: #E7BE72;
    --amber-soft: #392C11;
    --red: #E8917D;
    --red-soft: #3A1E17;
    --blue: #8FADEB;
    --blue-ink: #C3D3F5;
    --blue-soft: #1C2740;
    --blue-fg: #0E1B33;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 32px 64px -24px rgba(0, 0, 0, 0.65);
    --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
  }
}
/* A page can force a theme regardless of the OS setting with
   data-theme="light" / "dark" on <html> or <body>. */
:root[data-theme="dark"] {
  --bg: #10140F;
  --bg-tint: #151A13;
  --panel: #151A13;
  --card: #181F17;
  --ink: #E9EEE6;
  --ink-2: #B4C0AF;
  --ink-3: #7E8B7E;
  --line: #2B342A;
  --line-strong: #3A4538;
  --chip: #202920;
  --accent: #6FCB9A;
  --accent-ink: #9BE0BD;
  --accent-soft: #163726;
  --accent-fg: #08150F;
  --amber: #E7BE72;
  --amber-soft: #392C11;
  --red: #E8917D;
  --red-soft: #3A1E17;
  --blue: #8FADEB;
  --blue-ink: #C3D3F5;
  --blue-soft: #1C2740;
  --blue-fg: #0E1B33;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 32px 64px -24px rgba(0, 0, 0, 0.65);
}

/* ---------------------------------------------------------------- reset */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }

/* ------------------------------------------------------------ type scale */
.h1 { font-size: clamp(28px, 5vw, 40px); }
.h2 { font-size: clamp(21px, 3.4vw, 27px); }
.h3 { font-size: 18px; }
.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px;
}
.lede { font-size: 17px; color: var(--ink-2); line-height: 1.5; }
h2.section {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  margin: 22px 2px 10px; font-family: var(--sans); font-weight: 700;
}
h2.section:first-child { margin-top: 4px; }

/* ------------------------------------------------------------------ card */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
}
.card.pad, .card.padded { padding: 14px 16px; }

/* ----------------------------------------------------------------- chips */
.chip, .badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--chip); color: var(--ink-2);
}
.chip .dot, .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-accent, .badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip-amber, .badge-amber { background: var(--amber-soft); color: var(--amber); }
.chip-red, .badge-red { background: var(--red-soft); color: var(--red); }
.chip-blue, .badge-blue { background: var(--blue-soft); color: var(--blue); }

/* ---------------------------------------------------------------- states */
.empty { color: var(--ink-3); text-align: center; padding: 48px 20px; font-size: 15px; }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px; color: var(--ink-3); font-size: 15px; text-align: center; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line, rgba(0,0,0,.12)); border-top-color: var(--accent, #1F6E4C); animation: db-spin .8s linear infinite; }
@keyframes db-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.err, .error { color: var(--red); font-size: 14px; padding: 30px 16px; text-align: center; }
.success { color: var(--accent-ink); }

/* ----------------------------------------------------------------- forms */
label, label.field {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 10px 0 5px;
}
label.field:first-child { margin-top: 0; }
textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="password"],
select {
  width: 100%; font: inherit; font-size: 15px; padding: 11px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
textarea { min-height: 78px; resize: vertical; }
.field-row { display: flex; gap: 8px; }
.field-row > * { flex: 1; }

/* ---------------------------------------------------------------- button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--radius-sm); padding: 11px 16px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; text-decoration: none; font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.block, .btn.full { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: 0.5; pointer-events: none; cursor: default; }

/* ----------------------------------------------------------------- table */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ----------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 13.5px;
  box-shadow: var(--shadow); z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.toast.show { opacity: 1; }

/* ------------------------------------------------------------- wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.wordmark .mark { width: 26px; height: 26px; flex: none; }
.wordmark span, .wordmark-text {
  font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ misc */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }

/* ------------------------------------------------------------ focus ring
   Every interactive element gets the same visible ring on keyboard focus,
   and none on mouse/touch focus (":focus-visible" already draws that
   line). No page should need to redeclare this. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 0;
  border-color: var(--accent);
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   PROOF CONSOLE — the customer dashboard's (my.html) own palette.
   Scoped to `.proof-console` (set on that page's <body>) so it never
   touches the marketing site, team app, or sign-in page, which keep
   the tokens above. Colors live here, in brand.css, per the
   design-system rule; my.html references only these tokens.
   ================================================================ */
.proof-console {
  --bg: #EBEEF2; --bg-tint: #E2E7EC; --panel: #E5EAEF; --card: #FFFFFF;
  --inset: #0E1620; --inset-line: #243244; --screen-fg: #EAF1F7; --screen-dim: #4A5A6C;
  --ink: #121A24; --ink-2: #47535F; --ink-3: #7A8794;
  --line: #D8DFE6; --line-strong: #C2CCD6; --chip: #E6EBF0;
  --accent: #17724C; --accent-ink: #0F5537; --accent-soft: #DCEEE4; --accent-fg: #FFFFFF;
  --led-go: #1FA971; --led-look: #C68A16; --led-stop: #C6402A; --led-idle: #93A2B0;
  --amber: #8A6410; --amber-soft: #F7EBD4; --red: #B0392A; --red-soft: #F8E2DD;
  --blue: #2A54A0; --blue-soft: #E1E9F7;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,26,36,.05), 0 10px 26px -14px rgba(16,26,36,.20);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .proof-console {
    --bg: #0B1016; --bg-tint: #0F151C; --panel: #121A22; --card: #141C25;
    --inset: #070C12; --inset-line: #1E2A38; --screen-fg: #EAF1F7; --screen-dim: #4A5A6C;
    --ink: #E7EDF3; --ink-2: #A9B6C2; --ink-3: #71808E;
    --line: #232E3A; --line-strong: #33404E; --chip: #1B242E;
    --accent: #4FC793; --accent-ink: #7FDDAF; --accent-soft: #123227; --accent-fg: #06130D;
    --led-go: #37D08D; --led-look: #E4B860; --led-stop: #EC8873; --led-idle: #64717F;
    --amber: #E4B860; --amber-soft: #33280F; --red: #EC8873; --red-soft: #331A15;
    --blue: #8DA9E6; --blue-soft: #172440;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] .proof-console {
  --bg: #0B1016; --bg-tint: #0F151C; --panel: #121A22; --card: #141C25;
  --inset: #070C12; --inset-line: #1E2A38; --screen-fg: #EAF1F7; --screen-dim: #4A5A6C;
  --ink: #E7EDF3; --ink-2: #A9B6C2; --ink-3: #71808E;
  --line: #232E3A; --line-strong: #33404E; --chip: #1B242E;
  --accent: #4FC793; --accent-ink: #7FDDAF; --accent-soft: #123227; --accent-fg: #06130D;
  --led-go: #37D08D; --led-look: #E4B860; --led-stop: #EC8873; --led-idle: #64717F;
  --amber: #E4B860; --amber-soft: #33280F; --red: #EC8873; --red-soft: #331A15;
  --blue: #8DA9E6; --blue-soft: #172440;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
}