/**
 * PaperOffice Classic → Marketing Brand CI (paperoffice.ai)
 * 60 % Neutral / 30 % Surface / 10 % Primary — weniger bunt, klarere Hierarchie
 * SOT: paperoffice.ai/src/styles/po_brand_ci.css
 */

:root {
  --po-brand-primary: #0077B6;
  --po-brand-primary-light: #12A0F3;
  --po-brand-primary-dark: #005a8c;
  --po-brand-signal-teal: #16B8A6;
  --po-brand-page: #f6f8fb;
  --po-brand-page-soft: #eef2f7;
  --po-brand-surface: #ffffff;
  --po-brand-ink: #0f172a;
  --po-brand-body: #1e293b;
  --po-brand-muted: #5b6b7f;
  --po-brand-border: rgba(15, 23, 42, 0.12);
  --po-brand-radius-cta: 12px;
}

/* Basis: ruhige Fläche + DM Sans wenn geladen */
body.m4-cloak,
body {
  background-color: var(--po-brand-page) !important;
  color: var(--po-brand-body);
  font-family: "DM Sans", "TT Norms", "TTNorms", system-ui, -apple-system, sans-serif;
}

.poai_h1,
.poai_spotlight_heading,
.poai_subheading,
.poai_subheading_2,
.poai_button {
  font-family: "DM Sans", "TT Norms", "TTNorms", system-ui, sans-serif !important;
}

/* Metro Primary → Brand Primary */
.button.primary,
.command-button.primary,
.shortcut.primary,
.split-button .split.primary,
.tool-button.primary {
  background-color: var(--po-brand-primary) !important;
  border-color: var(--po-brand-primary) !important;
  color: #fff !important;
  border-radius: var(--po-brand-radius-cta) !important;
}

.button.primary:hover,
.button.primary:focus,
.command-button.primary:hover,
.shortcut.primary:hover {
  background-color: var(--po-brand-primary-dark) !important;
  border-color: var(--po-brand-primary-dark) !important;
  color: #fff !important;
}

.button.primary.outline,
.button.primary.outline:active {
  background-color: transparent !important;
  color: var(--po-brand-primary) !important;
  border: 2px solid var(--po-brand-primary) !important;
  border-radius: var(--po-brand-radius-cta) !important;
}

.button.primary.outline:hover,
.button.primary.outline:focus {
  background-color: rgba(0, 119, 182, 0.08) !important;
  color: var(--po-brand-primary-dark) !important;
  border-color: var(--po-brand-primary-dark) !important;
}

/* Warning/Orange-CTAs → Primary (weniger Bunt) */
.button.warning,
.button.warning:active,
.command-button.warning,
.shortcut.warning {
  background-color: var(--po-brand-primary) !important;
  border-color: var(--po-brand-primary) !important;
  color: #fff !important;
  border-radius: var(--po-brand-radius-cta) !important;
}

.button.warning:hover,
.button.warning:focus {
  background-color: var(--po-brand-primary-dark) !important;
  border-color: var(--po-brand-primary-dark) !important;
  color: #fff !important;
}

.button.warning.outline {
  background-color: transparent !important;
  color: var(--po-brand-primary) !important;
  border: 2px solid var(--po-brand-primary) !important;
}

/* Info-Cyan → Outline Primary (sekundäre Aktion) */
.button.info,
.button.info:active {
  background-color: transparent !important;
  color: var(--po-brand-primary) !important;
  border: 2px solid var(--po-brand-primary) !important;
  border-radius: var(--po-brand-radius-cta) !important;
}

.button.info:hover,
.button.info:focus {
  background-color: rgba(0, 119, 182, 0.08) !important;
  color: var(--po-brand-primary-dark) !important;
  border-color: var(--po-brand-primary-dark) !important;
}

/* Secondary bleibt ruhig, Radius angleichen */
.button.secondary {
  border-radius: var(--po-brand-radius-cta) !important;
}

.button.default,
.button.link {
  border-radius: var(--po-brand-radius-cta) !important;
}

.poai_button.button,
.poai_button.button.large {
  border-radius: var(--po-brand-radius-cta) !important;
  font-weight: 600 !important;
}

/* Orange Utility-Klassen → Brand Primary */
.bg-orange,
.button.bg-orange,
.bg-warmOrange {
  background-color: var(--po-brand-primary) !important;
}

.fg-warmOrange,
.fg-orange {
  color: var(--po-brand-primary) !important;
}

/* Mark-Highlights: dezent statt Neon-Gelb */
mark {
  background: rgba(0, 119, 182, 0.12) !important;
  color: inherit !important;
  padding: 0 0.2em;
  border-radius: 3px;
}

/* Links in Content */
a.poai_button,
a:where(.underline-none) .button {
  text-decoration: none;
}

/* Weichere Section-Hintergründe statt greller Blöcke */
.bg-lighterBlue,
.bg-lightererWinSteel {
  background-color: var(--po-brand-page-soft) !important;
}

.fg-lighterBlue {
  color: var(--po-brand-muted) !important;
}

/* Success/Alert nur als Signal, nicht als CTA-Default belassen — leicht entsättigt */
.button.success {
  border-radius: var(--po-brand-radius-cta) !important;
}

/* Headlines näher an AI-Ink */
.poai_h1,
.poai_spotlight_heading {
  color: var(--po-brand-ink) !important;
}

/* h1.poai_h1: semantisch korrekt, optisch wie bisheriges p.poai_h1 */
h1.poai_h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: inherit;
}

.poai_subheading,
.poai_subheading_2 {
  color: var(--po-brand-body) !important;
}

/* Eyebrow-Pills (Presse etc.): dunkler, ruhiger statt knall-orange */
.poai_eyebrow_white.bg-orange,
span.bg-orange.border-radius-20 {
  background-color: var(--po-brand-ink) !important;
  color: #fff !important;
}