/* OpsTakt's shared palette: white, midnight navy and restrained mint.
   Loaded after each surface's layout styles; no workflow or layout changes. */
:root {
  color-scheme: light;
  --op-ink: #020617;
  --op-muted: #64748b;
  --op-paper: #ffffff;
  --op-wash: #f8fafc;
  --op-line: #e2e8f0;
  --op-mint: #d1fae5;
  --op-mint-wash: #ecfdf5;
  --op-accent: #047857;
  --op-signal: #10b981;
  --op-hover: #1e293b;
  --op-focus: #2563eb;

  /* Existing surfaces use different names for the same visual roles. */
  --navy: var(--op-ink); --navy2: var(--op-hover);
  --night: var(--op-ink); --dark: var(--op-ink); --blau: var(--op-ink);
  --ink: var(--op-ink); --text: var(--op-ink);
  --muted: var(--op-muted); --grau: var(--op-muted);
  --paper: var(--op-paper); --wash: var(--op-wash); --bg: var(--op-wash);
  --line: var(--op-line); --linie: var(--op-line);
  --mint: var(--op-accent); --green: var(--op-accent); --gruen: var(--op-accent);
  --signal: var(--op-accent); --akzent: var(--op-accent);
  --mint2: var(--op-mint); --akzent-hell: var(--op-mint);
  --lime: #6ee7b7; --brand: var(--op-ink);
  --shadow: 0 18px 55px rgb(2 6 23 / 7%);
}

body { color: var(--op-ink); }
a { color: var(--op-ink); }
:focus-visible { outline: 3px solid var(--op-focus); outline-offset: 3px; }
::selection { background: var(--op-mint); color: var(--op-ink); }
input, select, textarea { accent-color: var(--op-accent); }

/* Public website, industry landing pages and free timesheet check. */
body:is([data-opstakt-surface="home"], [data-opstakt-surface="industry"], [data-opstakt-surface="timesheet"]) {
  background: var(--op-paper);
}
.top { border-bottom-color: var(--op-line); }
.logo, .logo span { color: var(--op-ink); }
body:is([data-opstakt-surface="home"], [data-opstakt-surface="industry"], [data-opstakt-surface="timesheet"]) .hero {
  background: radial-gradient(ellipse at 90% 25%, var(--op-mint-wash), transparent 48%), var(--op-paper);
  color: var(--op-ink);
  border-bottom: 1px solid var(--op-line);
}
[data-opstakt-surface="home"] .hero::before,
[data-opstakt-surface="home"] .hero::after { background: none; border-color: transparent; }
.hero h1 span { color: var(--op-accent); }
.hero .eyebrow { color: var(--op-accent); }
.hero :is(.lead, .answer, .trust, .status, .crumbs),
[data-opstakt-surface="timesheet"] .hero p { color: var(--op-muted); }
.hero .crumbs a { color: var(--op-ink); }
.hero .trust span::before { color: var(--op-accent); }
.heroFlow span { background: var(--op-wash); border-color: var(--op-line); color: var(--op-ink); }
.heroFlow span::before { color: var(--op-accent); }
.btn.primary, .btn.dark,
[data-opstakt-surface="industry"] .button {
  background: var(--op-ink); color: var(--op-paper);
}
.btn.primary:hover, .btn.dark:hover,
[data-opstakt-surface="industry"] .button:hover { background: var(--op-hover); }
.btn.ghost { background: var(--op-wash); color: var(--op-ink); }
#heroDemo, [data-opstakt-surface="industry"] .button.alt {
  background: var(--op-mint); color: #065f46;
}
#heroDemo:hover, [data-opstakt-surface="industry"] .button.alt:hover { background: #a7f3d0; }
.productPreview { background: var(--op-paper); border-color: var(--op-line); box-shadow: 0 24px 65px rgb(2 6 23 / 10%); }
.previewScreen { background: linear-gradient(155deg, var(--op-paper), var(--op-wash)); }
.previewToggle, .miniApp { background: var(--op-wash); }
.sceneRows { box-shadow: 0 10px 30px rgb(2 6 23 / 4%); }
.sceneRow { border-color: var(--op-line); }
.sceneStatus, .sectorStatus.live, .miniBadge { background: var(--op-mint); color: #065f46; }
.sceneStatus.warn, .miniBadge.warn { background: var(--amberbg); color: var(--amber); }
.sector.active { border-color: var(--op-accent); box-shadow: 0 10px 30px rgb(2 6 23 / 5%); }
.featurePreviewCard { box-shadow: 0 8px 25px rgb(2 6 23 / 4%); }
.featurePreviewCard:hover { border-color: #a7f3d0; }
.featurePreviewCard[data-feature="intake"] .miniApp { background: var(--op-wash); }
[data-opstakt-surface="home"] .config { background: var(--op-wash); color: var(--op-ink); border-block: 1px solid var(--op-line); }
[data-opstakt-surface="home"] .config .sectionHead p { color: var(--op-muted); }
.configMain, .priceCard { box-shadow: 0 0 0 1px var(--op-line); }
.module.required { border-color: var(--op-line); background: var(--op-wash); }
[data-opstakt-surface="home"] footer,
[data-opstakt-surface="industry"] footer { background: var(--op-ink); }
[data-opstakt-surface="industry"] .price .label { color: var(--lime); }
.cta .btn.primary { background: var(--op-mint); color: #065f46; }

/* The office and mobile headers now share the light website chrome. */
body:is([data-opstakt-surface="app"], [data-opstakt-surface="field"], [data-opstakt-surface="admin"]) > header,
[data-opstakt-surface="mobile"] header,
[data-opstakt-surface="legal"] header {
  background: var(--op-paper); color: var(--op-ink); border-bottom: 1px solid var(--op-line);
}
[data-opstakt-surface="app"] header :is(a, button),
[data-opstakt-surface="field"] header a,
[data-opstakt-surface="mobile"] header :is(button, select.spr),
[data-opstakt-surface="legal"] header .bar a {
  color: var(--op-ink); opacity: 1; border-color: var(--op-line); background: var(--op-paper);
}
[data-opstakt-surface="app"] header .betrieb { color: var(--op-muted); opacity: 1; }
[data-opstakt-surface="app"] .demoTools select { border: 1px solid var(--op-line); }
.demoModeLabel { background: var(--op-mint); color: #065f46; border-radius: 7px; padding: 6px 9px; }
[data-opstakt-surface="app"] nav button.aktiv { background: var(--op-mint-wash); color: var(--op-ink); }
.coreIntro, .demoWelcome,
[data-opstakt-surface="field"] .hero,
[data-opstakt-surface="portal"] .hero {
  background: linear-gradient(120deg, var(--op-paper), var(--op-mint-wash));
  color: var(--op-ink); border: 1px solid var(--op-line);
}
.coreIntro p, .demoWelcome p,
[data-opstakt-surface="field"] .hero p,
[data-opstakt-surface="portal"] .hero p { color: var(--op-muted); opacity: 1; }
.coreIntro .step, .demoBadge { color: var(--op-accent); opacity: 1; }
.coreFlow button, .guideStep, .industrySignal { background: var(--op-paper); color: var(--op-ink); border-color: var(--op-line); }
.coreFlow button:hover, .guideStep:hover { background: var(--op-mint); }
.coreFlow small, .guideStep small { color: var(--op-muted); }
.guideStep span { color: var(--op-accent); }
.coreBack, .configPrice, .cashBar, .docReview, .bericht, .pipeCol, .tag { background: var(--op-wash); border-color: var(--op-line); }
button.tat:not(.zweit), .configActions .save,
[data-opstakt-surface="app"] button.btn:not(.secondary),
[data-opstakt-surface="field"] .actions .complete,
[data-opstakt-surface="portal"] button,
[data-opstakt-surface="admin"] .knopf,
[data-opstakt-surface="mobile"] button.aktion:not(.stop):not(.pause):not(.zweit) {
  background: var(--op-ink); color: var(--op-paper);
}
button.tat:not(.zweit):hover,
[data-opstakt-surface="field"] .actions .complete:hover { background: var(--op-hover); }
.configModule.aktiv { background: var(--op-mint-wash); }
[data-opstakt-surface="field"] .network { background: var(--op-mint); color: #065f46; border-color: #a7f3d0; }
[data-opstakt-surface="field"] .network.offline { background: #fff3d8; color: #7a5100; border-color: #efd3a8; }
[data-opstakt-surface="field"] .done,
[data-opstakt-surface="portal"] :is(.status, .message),
[data-opstakt-surface="app"] .status.ok { background: var(--op-mint); color: #065f46; }

/* Account setup, onboarding, job flow, and customer-facing documents. */
[data-opstakt-surface="login"] main { box-shadow: 0 18px 50px rgb(2 6 23 / 7%); }
[data-opstakt-surface="login"] button { background: var(--op-ink); color: var(--op-paper); }
[data-opstakt-surface="login"] :is(.lang, #recovery) { background: var(--op-wash); color: var(--op-ink); }
[data-opstakt-surface="login"] :is(.unter, .demo) { color: var(--op-muted); }
[data-opstakt-surface="login"] .demo { background: var(--op-wash); }
[data-opstakt-surface="workspace"] :is(input, select, textarea) { border-color: #cbd5e1; }
[data-opstakt-surface="workspace"] .secondary { background: #f1f5f9; color: var(--op-ink); }
[data-opstakt-surface="workspace"] .steps span { background: #f1f5f9; }
[data-opstakt-surface="workspace"] .steps .current { background: var(--op-ink); color: var(--op-paper); }
[data-opstakt-surface="workspace"] .steps .done,
[data-opstakt-surface="workspace"] .message:not(.error) { background: var(--op-mint); color: #065f46; }
[data-opstakt-surface="legal"] main { box-shadow: 0 18px 60px rgb(2 6 23 / 5%); }
[data-opstakt-surface="legal"] footer .logo span { color: var(--lime); }

/* Keep warning/error colors semantic rather than turning every state mint. */
[data-opstakt-surface="app"] .meldung:not(.fehler),
[data-opstakt-surface="mobile"] .meldung:not(.fehler):not(.offline) { background: var(--op-mint); color: #065f46; }
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}