:root{
  --paper:#FAF7EF;
  --card:#FFFFFF;
  --ink:#1C2B40;
  --ink-soft:#5B6B82;
  --ink-faint:#8B96A8;
  --brass:#9C7328;
  --brass-light:#EADFC3;
  --on-brass:#FFFFFF;
  --forest:#2F6F5E;
  --forest-light:#DDEBE6;
  --on-forest:#FFFFFF;
  --rule:#E1D9C6;
  --rule-strong:#CBBFA0;
  --danger:#A6432F;
  --radius:10px;
  --shadow: 0 1px 2px rgba(28,43,64,0.05), 0 4px 14px rgba(28,43,64,0.06);
}

/* Color scheme: Midnight -- dark mode */
body.theme-midnight{
  --paper:#1B1F27;
  --card:#242A35;
  --ink:#E8E6DF;
  --ink-soft:#A9B2C3;
  --ink-faint:#707A8C;
  --brass:#D9B872;
  --brass-light:#3A3220;
  --on-brass:#1B1F27;
  --forest:#6FBFA4;
  --forest-light:#1E332C;
  --on-forest:#1B1F27;
  --rule:#333A47;
  --rule-strong:#454E5E;
  --danger:#E08066;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.35);
}

/* Color scheme: Slate -- cool, neutral light alternative */
body.theme-slate{
  --paper:#EEF1F5;
  --card:#FFFFFF;
  --ink:#22303F;
  --ink-soft:#5C6B7C;
  --ink-faint:#8D99A8;
  --brass:#3E6E8E;
  --brass-light:#D8E6EF;
  --on-brass:#FFFFFF;
  --forest:#3F7A5C;
  --forest-light:#DCEEE3;
  --on-forest:#FFFFFF;
  --rule:#DCE3EA;
  --rule-strong:#C2CCD8;
  --danger:#B24A44;
  --shadow: 0 1px 2px rgba(34,48,63,0.06), 0 4px 14px rgba(34,48,63,0.07);
}

/* Color scheme: Ember -- true orange and black */
body.theme-ember{
  --paper:#0A0A0A;
  --card:#1C1C1C;
  --ink:#F5F0E8;
  --ink-soft:#D0C7B8;
  --ink-faint:#8F8578;
  --brass:#FF6A00;
  --brass-light:#3D2110;
  --on-brass:#0A0A0A;
  --forest:#FFB347;
  --forest-light:#3A2610;
  --on-forest:#0A0A0A;
  --rule:#2E2E2E;
  --rule-strong:#454545;
  --danger:#FF4D4D;
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.55);
}

/* Color scheme: Moss -- deep forest green and cream */
body.theme-moss{
  --paper:#F1F0E6;
  --card:#FFFFFF;
  --ink:#22331F;
  --ink-soft:#54634F;
  --ink-faint:#8B9683;
  --brass:#4B6B3A;
  --brass-light:#DCE6D3;
  --on-brass:#FFFFFF;
  --forest:#8A6D3B;
  --forest-light:#EFE4CE;
  --on-forest:#FFFFFF;
  --rule:#DDE2D2;
  --rule-strong:#C4CDB6;
  --danger:#A6432F;
  --shadow: 0 1px 2px rgba(34,51,31,0.06), 0 4px 14px rgba(34,51,31,0.08);
}

/* Color scheme: Royal -- deep purple and gold */
body.theme-royal{
  --paper:#241A35;
  --card:#332648;
  --ink:#F1EAFB;
  --ink-soft:#C3B3DE;
  --ink-faint:#8A7AA3;
  --brass:#D4AF37;
  --brass-light:#4A3B1A;
  --on-brass:#241A35;
  --forest:#A98AE8;
  --forest-light:#3D2F5A;
  --on-forest:#241A35;
  --rule:#443659;
  --rule-strong:#5C4C7A;
  --danger:#E0667A;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img.brand-icon{
  width:24px;height:24px;object-fit:contain;border-radius:5px;margin-right:8px;vertical-align:middle;
}
h1.brand{display:flex;align-items:center;}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 28px;background:#1C2B40;color:#EFEAE0;font-size:13px;
}
.toolbar .left,.toolbar .right{display:flex;align-items:center;gap:10px;}
.toolbar select,.toolbar input{
  background:#25364F;color:#EFEAE0;border:1px solid #3A4C68;border-radius:6px;
  padding:5px 8px;font-family:'Inter',sans-serif;font-size:13px;
}
.btn{
  border:1px solid transparent;border-radius:6px;padding:6px 13px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-brass{background:var(--brass);color:var(--on-brass);}
.btn-ghost-dark{background:transparent;color:#EFEAE0;border-color:#48597A;}
.btn-ghost-dark:hover{background:#25364F;}
.btn-outline{background:var(--card);color:var(--ink);border-color:var(--rule-strong);}
.btn-outline:hover{border-color:var(--ink-soft);}
.btn-primary{background:var(--forest);color:var(--on-forest);}
.btn-danger{background:var(--card);color:var(--danger);border-color:var(--danger);}
.btn-text{background:none;border:none;color:var(--ink-soft);font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;}

/* Buttons inside the toolbar get fixed colors regardless of page
   theme -- the ribbon intentionally has one look, always, per design
   decision: it doesn't need per-theme contrast logic since its own
   background never changes. */
.toolbar .btn-brass{background:#9C7328;color:#FFFFFF;}
.toolbar .btn-outline{background:#25364F;color:#EFEAE0;border-color:#48597A;}
.toolbar .btn-danger{background:#3A2620;color:#FFB3A0;border-color:#6B3A30;}

.panel{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.field label{
  display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px;
}
.field select,.field input,.field textarea{
  width:100%;border:1px solid var(--rule-strong);border-radius:6px;
  padding:6px 8px;font-family:'Inter',sans-serif;font-size:13px;color:var(--ink);background:var(--card);
}
.field select:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass);}

.empty-state{padding:24px;text-align:center;color:var(--ink-faint);font-size:13px;}