/* BCF.ai shared design tokens.
   Canonical values consolidated from the per-template <style> blocks.
   Templates may still define their own :root vars; those win by cascade order,
   so migration can happen one page at a time by deleting the local copies. */
:root {
  /* surfaces */
  --bg:            #f7f9fc;
  --card:          #ffffff;
  --border:        #e0e4e8;

  /* text */
  --text:          #1e293b;
  --muted:         #64748b;
  --dark:          #0f1923;

  /* brand */
  --sage:          #2d5a3d;
  --accent:        #16a34a;
  --accent-soft:   #52b788;
  --amber:         #c8742a;
  --amber-light:   #fdf3e7;

  /* status */
  --ok:            #166534;
  --ok-bg:         #dcfce7;
  --ok-border:     #bbf7d0;
  --warn:          #854d0e;
  --warn-bg:       #fef9c3;
  --warn-border:   #fde047;
  --bad:           #991b1b;
  --bad-bg:        #fef2f2;
  --bad-border:    #fecaca;

  /* legacy aliases -- pages using the --bcf-* scheme keep working */
  --bcf-bg:        var(--bg);
  --bcf-card:      var(--card);
  --bcf-border:    var(--border);
  --bcf-text:      var(--text);
  --bcf-muted:     var(--muted);
  --bcf-dark:      var(--dark);
  --bcf-accent:    var(--accent-soft);
  --bcf-orange:    #e07b39;
  --bcf-green:     #2d6a4f;
  --bcf-green-light: #40916c;
}


/* ---------------------------------------------------------------
   Dark surface layer. Opt in per page with <body class="dark">.
   Pages keep their own <style> until migrated; these are the
   canonical values everything should land on.
   --------------------------------------------------------------- */
body.dark{
  --ink:#0e1a17; --surface:#16241f; --raised:#1d2f28; --line:#274036;
  --dtext:#e8f0ec; --dmuted:#7d9389; --ddim:#4f6259;
  --sage:#52b788; --amber:#e0913f; --steel:#6ba3c7; --plum:#a98bc4; --red:#d9615a;
  background:var(--ink); color:var(--dtext);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
body.dark .mono,.dark .mono{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
body.dark a{color:inherit;text-decoration:none;}
body.dark h1,body.dark h2,body.dark h3{font-family:Archivo,system-ui,sans-serif;}

.dark .page{padding:30px;max-width:1500px;margin:0 auto;}
.dark .page-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.dark .page-h h1{font-size:26px;font-weight:700;letter-spacing:-.6px;margin:0;}
.dark .page-h .sub{font-size:13px;color:var(--dmuted);padding-bottom:3px;}
.dark .page-h .right{margin-left:auto;display:flex;gap:8px;align-items:center;}

.dark .card{background:var(--surface);border:1px solid var(--line);
            border-radius:14px;overflow:hidden;}
.dark .card-h{display:flex;align-items:baseline;gap:10px;padding:16px 20px 13px;}
.dark .card-h h3{font-size:13.5px;margin:0;font-weight:600;}
.dark .card-h .r{margin-left:auto;font-size:11.5px;color:var(--dmuted);}

.dark table{width:100%;border-collapse:collapse;}
.dark thead th{font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
   color:var(--ddim);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
   white-space:nowrap;}
.dark tbody td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:13px;
   vertical-align:middle;}
.dark tbody tr:last-child td{border-bottom:none;}
.dark tbody tr:hover{background:#1a2b24;}
.dark tbody tr{cursor:pointer;}
.dark td.num,.dark th.num{text-align:right;font-variant-numeric:tabular-nums;}
.dark .t-strong{font-weight:500;}
.dark .t-sub{font-size:11px;color:var(--dmuted);margin-top:2px;}
.dark .t-dim{color:var(--ddim);}

.dark .pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;
   text-transform:uppercase;padding:3px 9px;border-radius:20px;border:1px solid transparent;}
.dark .pill.ok{color:#8ce0b0;background:rgba(82,183,136,.14);border-color:rgba(82,183,136,.35);}
.dark .pill.warn{color:#f0bd85;background:rgba(224,145,63,.14);border-color:rgba(224,145,63,.35);}
.dark .pill.bad{color:#f0918c;background:rgba(217,97,90,.14);border-color:rgba(217,97,90,.35);}
.dark .pill.info{color:#a8cfe4;background:rgba(107,163,199,.14);border-color:rgba(107,163,199,.35);}
.dark .pill.hold{color:#c9b0dd;background:rgba(169,139,196,.14);border-color:rgba(169,139,196,.35);}
.dark .pill.mute{color:var(--dmuted);background:rgba(125,147,137,.1);border-color:var(--line);}

.dark .btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:8px 14px;
   border-radius:9px;border:1px solid var(--line);background:var(--raised);
   color:var(--dtext);cursor:pointer;transition:background .15s;}
.dark .btn:hover{background:#24382f;}
.dark .btn.primary{background:var(--sage);border-color:var(--sage);color:#08150f;font-weight:600;}
.dark .btn.primary:hover{filter:brightness(1.08);}

.dark .field{background:#111e1a;border:1px solid var(--line);border-radius:9px;
   color:var(--dtext);font-size:13px;padding:9px 12px;font-family:inherit;}
.dark .field::placeholder{color:var(--ddim);}
.dark .field:focus{outline:none;border-color:var(--sage);}

.dark .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.dark .tab{font-size:13px;padding:9px 16px;color:var(--dmuted);border-bottom:2px solid transparent;
   cursor:pointer;}
.dark .tab.on{color:var(--sage);border-bottom-color:var(--sage);font-weight:600;}

.dark .empty{padding:34px 20px;text-align:center;color:var(--dmuted);font-size:13px;}
