/* SAKA mixed theme: light work surfaces, burgundy brand bands.
   Load after landing.css, web.css, home.css and admin.css. Prototype only. */
:root {
  --page-background: #fbf8f2;
  --surface: #fffdf8;
  --surface-soft: #f4ede2;
  --surface-muted: #f7f1e8;
  --ink: var(--deep-burgundy);
  --muted: #695b54;
  --line: rgb(67 21 28 / 18%);
  --border-gold: rgb(136 98 32 / 28%);
  --border-strong: #9d7b40;
  --control-border: #9a8777;
  --gold: #785211;
  --teal: var(--brand-burgundy);
  --focus: var(--brand-burgundy);
  --error-text: #9b3039;
  --status-success: #286748;
  --backdrop: rgb(24 5 10 / 65%);
  color-scheme: light;
}
body { background:var(--page-background); color:var(--ink); color-scheme:light; }
.skip-link { background:var(--brand-gold); color:var(--deep-burgundy); }
/* Context tokens keep the original dark palette confined to the brand areas. */
.brand-band {
  --ink:var(--warm-cream);
  --muted:var(--muted-cream);
  --surface:var(--brand-burgundy);
  --surface-soft:#4e1922;
  --surface-muted:#361018;
  --line:rgb(232 182 63 / 26%);
  --border-gold:rgb(232 182 63 / 26%);
  --border-strong:rgb(232 182 63 / 58%);
  --control-border:var(--border-strong);
  --gold:var(--brand-gold);
  --teal:var(--brand-gold);
  --focus:#fff0be;
  --error-text:#ffb4ab;
  color:var(--ink);
  background:var(--deep-burgundy);
  color-scheme:dark;
}
.brand-band .site-header { background:transparent; margin-block:0; border-top:0; border-inline:0; border-radius:0; box-shadow:none; }
.brand-band .home-header { border-bottom-color:var(--line); }
.brand-band .home-hero { padding-bottom:48px; }
.brand-band .site-footer { border-top:0; }
.demo-ribbon { background:var(--surface-soft); color:var(--muted); border-bottom:1px solid var(--line); }
.brand-caption, .brand-fallback-note { color:var(--muted); }
.eyebrow { color:var(--muted); }
.route-word, .gold-text { color:var(--gold); }
.button-outline { color:var(--ink); border-color:var(--border-strong); background:transparent; }
.button-outline:hover { background:var(--surface-soft); color:var(--ink); border-color:var(--teal); }
.button-primary, .button-gold { background:var(--brand-gold); color:var(--deep-burgundy); border-color:var(--dark-gold); }
.button-primary:hover, .button-gold:hover { background:var(--dark-gold); color:var(--deep-burgundy); }
.text-link, .plain-button { color:var(--ink); }
.text-link:hover, .plain-button:hover { color:var(--teal); }
.notice { color:var(--ink); background:var(--surface-soft); border-inline-start-color:var(--dark-gold); }
.panel, dialog { background:var(--surface); color:var(--ink); }
input, select, textarea { background:var(--surface); color:var(--ink); border-color:var(--control-border); }
input::placeholder, textarea::placeholder { color:var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color:var(--brand-burgundy); }
.connection-text { background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); }
.error { color:var(--error-text); }
.success { color:var(--status-success); }
.badge { color:var(--ink); background:var(--surface-soft); border-color:var(--line); }
.badge.gold { color:var(--gold); }
.badge.muted { color:var(--muted); }
.badge.danger { color:var(--error-text); }
.tabs button[aria-pressed="true"], .tabs a[aria-current] { color:var(--warm-cream); background:var(--brand-burgundy); border-color:var(--brand-burgundy); }
.data-table td { background:var(--surface); }
.data-table th { background:var(--surface-soft); color:var(--muted); }
.data-table td small { color:var(--muted); }
.account-nav a[aria-current] { background:var(--surface-soft); color:var(--ink); }
.account-overview { background:var(--surface-soft); padding-inline:20px; border-radius:8px; }
.service { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:25px; margin-top:18px; }
.protocol-section, .telegram-section { background:var(--surface); border-block:1px solid var(--line); }
.privacy-section { background:var(--surface-muted); }
.closing { background:var(--surface-soft); border-color:var(--line); }
.closing p:not(.eyebrow) { color:var(--muted); }
.test-guide li::before { background:var(--surface); color:var(--ink); border-color:var(--control-border); }

/* Homepage: reading, plans and the product preview now sit on light surfaces. */
.home-page .service-directory { margin-top:0; background:var(--surface); }
.home-page .service-directory a:hover { background:var(--surface-soft); }
.home-page .service-directory small { color:var(--muted); }
.home-page .home-pricing { background:var(--surface); }
.home-page .account-preview { background:var(--surface); border-color:var(--line); }
.home-page .preview-header { background:var(--surface-soft); border-bottom-color:var(--line); }
.home-page .preview-header span, .home-page .preview-usage > span,
.home-page .preview-facts dt, .home-page .preview-footer { color:var(--muted); }
.home-page .preview-kicker bdi { color:var(--ink); }
.home-page .account-preview meter { background:var(--surface-soft); }
.home-page .account-preview meter::-webkit-meter-bar { background:var(--surface-soft); }
.home-page .account-preview meter::-webkit-meter-optimum-value { background:var(--dark-gold); }
.home-page .account-preview meter::-moz-meter-bar { background:var(--dark-gold); }
.home-page .preview-actions span { background:var(--surface-soft); border-color:var(--line); }
.home-page .preview-actions span:first-child { color:var(--ink); border-color:var(--border-strong); }
.home-page .home-footer { background:transparent; }
.home-page .home-footer nav a { color:var(--muted); }
.home-page .home-footer nav a:hover { color:var(--gold); }
.home-page .home-pricing .home-segment { --focus:var(--warm-cream); }
.home-page .home-pricing .home-segment button:focus-visible { outline:2px solid var(--warm-cream); outline-offset:1px; box-shadow:inset 0 0 0 3px var(--deep-burgundy); }

/* Standalone report prototypes share the same readable light work area. */
body[data-page^="admin-"] .filter-bar,
body[data-page^="admin-"] .metric-strip,
body[data-page^="admin-"] .comparison { background:var(--surface); }
body[data-page^="admin-"] .metric-strip strong { color:var(--ink); }
body[data-page^="admin-"] .bar-track { background:var(--surface-soft); }
body[data-page^="admin-"] .bar-track span { background:var(--dark-gold); }

@media(max-width:760px) {
 .service { padding:20px 16px; }
 .account-overview { padding-inline:12px; gap:12px; }
}
@media print { .brand-band { background:white; color:var(--print-ink); } }