/* Canal Solar: palette and presentation derived from the supplied emblem. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #fff8f1;
  --surface-muted: #fff1e3;
  --text: #2b211b;
  --text-strong: #1d1713;
  --muted: #655850;
  --subtle: #786a60;
  --line: #e9ded5;
  --line-strong: #cbbbae;
  --primary: #b33b11;
  --primary-hover: #922f0e;
  --primary-text: #ffffff;
  --mint: #fff0d9;
  --mint-strong: #f4c982;
  --blue: #e9f1f9;
  --blue-text: #284e70;
  --amber: #fff0d0;
  --amber-text: #79500a;
  --lilac: #f1eaf8;
  --lilac-text: #694c80;
  --danger: #a53031;
  --focus: #f49a22;
  --shadow: 0 22px 64px rgba(68, 31, 12, .09);
  --shadow-soft: 0 8px 26px rgba(68, 31, 12, .055);
  --brand-glow: rgba(255, 176, 40, .19);
}

html[data-theme="dark"] {
  --bg: #0e0c0b;
  --surface: #191512;
  --surface-soft: #241c17;
  --surface-muted: #2b2018;
  --text: #f0e9e2;
  --text-strong: #fffaf6;
  --muted: #c7b8ad;
  --subtle: #ab9a8e;
  --line: #3a2d25;
  --line-strong: #685143;
  --primary: #ffac4b;
  --primary-hover: #ffbf72;
  --primary-text: #25150d;
  --mint: #3a2819;
  --mint-strong: #795027;
  --blue: #1f3446;
  --blue-text: #b8d8f5;
  --amber: #423017;
  --amber-text: #ffd38a;
  --lilac: #372c40;
  --lilac-text: #dfc4f2;
  --danger: #ff9d9e;
  --focus: #ffc56f;
  --shadow: 0 22px 64px rgba(0, 0, 0, .32);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, .2);
  --brand-glow: rgba(255, 129, 28, .13);
}

body {
  background: var(--bg);
  color: var(--text);
}

.demo-strip {
  background: #16110e;
  color: #fff4e8;
}
.demo-dot { background: #ffb223; }
.demo-dot, .live-dot { box-shadow: 0 0 0 4px rgba(255, 178, 35, .13); }
.demo-strip button { color: #ffca73; }
.site-header { background: var(--surface); }
.brand { gap: 9px; }
.brand-logo {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 3px 5px rgba(128, 51, 7, .12));
}
.brand-text { letter-spacing: -.065em; }
.brand-dot { color: #ed701a; }
.site-footer .brand-logo { width: 37px; height: 37px; }
.section-kicker, .eyebrow { color: var(--primary); }
.button-primary {
  box-shadow: 0 8px 20px rgba(169, 60, 13, .15);
}
.button-primary:hover {
  box-shadow: 0 10px 25px rgba(169, 60, 13, .23);
}
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .button-primary:hover {
  box-shadow: 0 8px 24px rgba(255, 139, 38, .16);
}
.form-block input:focus,
.form-block select:focus,
.form-block textarea:focus,
.track-card input:focus,
.messages-card textarea:focus,
.search-field input:focus,
.composer textarea:focus,
.staff-form input:focus,
.staff-form select:focus,
.staff-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.form-card, .staff-card, .staff-list button, .staff-row,
.attachment-form, .receipt-card, .track-result {
  border-color: var(--line);
}
.form-card { box-shadow: var(--shadow); }
.page-grid { gap: clamp(28px, 5vw, 72px); }
.page-aside-brand {
  width: 108px;
  height: 108px;
  margin: -15px 0 13px -10px;
  position: relative;
}
.page-aside-brand::before,
.staff-intro-brand::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--brand-glow);
  filter: blur(24px);
}
.page-aside-brand img,
.staff-intro-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
}
.staff-intro-brand {
  width: 142px;
  height: 142px;
  position: relative;
  margin: -28px 0 10px -16px;
}
.aside-note {
  background: var(--surface-soft);
  border-color: var(--mint-strong);
}
.help-card { border-left: 3px solid #f4a51d; }
.progress-step.active b, .progress-step.complete b {
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.receipt-icon {
  background: var(--mint);
  color: var(--primary);
}
.workflow-step[data-state="done"] {
  background: var(--mint);
  border-color: var(--mint-strong);
}
.workflow-step[data-state="done"] .workflow-body { background: var(--surface); }
.workflow-step[data-state="current"] .workflow-number { color: var(--primary-text); }
.staff-tabs button.active { box-shadow: inset 0 -1px 0 var(--primary); }
.staff-list button:hover { background: var(--surface-soft); }
.toast { background: #201710; color: #fffaf6; }
.sidebar-scrim { background: rgba(13, 9, 7, .6); }
.app-sidebar { background: #18110e; color: #f0ddd0; }
.brand-internal .brand-mark { background: #ffac4b; }
.brand-internal .brand-mark span { background: #28170e; }
.sidebar-caption, .demo-user small, .exit-link { color: #c7a899; }
.sidebar-nav a { color: #f0ddd0; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: #57301e; color: #ffffff; }
.sidebar-nav b { background: #9f461d; }
.avatar { background: #ffac4b; color: #28170e; }
.status-pulse { background: #ffb223; }

.file-mode-notice { display: none; }
.file-preview main, .file-preview .site-footer { display: none; }
.file-preview .file-mode-notice {
  display: block;
  max-width: 680px;
  margin: clamp(36px, 8vw, 90px) auto;
  padding: clamp(24px, 5vw, 48px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.file-mode-logo img { display: block; max-width: 100%; height: auto; }
.file-mode-notice h1 {
  margin: 14px 0 12px;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.file-mode-notice p { max-width: 54ch; color: var(--muted); }
.file-mode-notice .button { margin-top: 14px; }

@media (max-width: 860px) {
  .page-aside-brand { width: 90px; height: 90px; margin: 0 0 10px -5px; }
}
@media (max-width: 640px) {
  .brand-logo { width: 38px; height: 38px; }
  .brand-text { font-size: 20px; }
  .page-aside-brand { width: 78px; height: 78px; margin: -7px 0 9px -7px; }
  .staff-intro-brand { width: 100px; height: 100px; margin: -12px 0 6px -7px; }
  .page-grid { gap: 20px; }
  .form-card { padding: 22px 18px; }
}
@media (max-width: 390px) {
  .brand-logo { width: 34px; height: 34px; }
  .brand-text { font-size: 18px; }
}