:root {
  --om-navy: #153e65;
  --om-blue: #1d5e93;
  --om-ink: #172333;
  --om-muted: #647286;
  --om-line: #dce3e9;
  --om-canvas: #f3f6f8;
  --om-soft: #f8fafb;
  --om-green: #27825b;
  --om-amber: #b8750e;
}

html, body {
  font-family: "Noto Sans SC", "IBM Plex Sans", "PingFang SC", system-ui, sans-serif !important;
  color: var(--om-ink) !important;
  background: var(--om-canvas) !important;
}

/* Product shell: less decorative, denser, and easier to scan. */
header.glass-bar {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--om-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

header.glass-bar a,
header.glass-bar button {
  border-radius: 4px !important;
}

header.glass-bar a[href="/my-work"],
header.glass-bar a[href="/workflow"] {
  font-weight: 650 !important;
}

header.glass-bar a[aria-current="page"],
header.glass-bar a.bg-cocoa-900,
header.glass-bar a.bg-cocoa-800 {
  background: var(--om-navy) !important;
  color: white !important;
}

.bg-cream-50, .bg-cream-100, .bg-cream-200\/50,
.bg-parchment-50, .bg-parchment-100 {
  background-color: var(--om-canvas) !important;
}

.font-display, .font-serif {
  font-family: "Noto Sans SC", "IBM Plex Sans", "PingFang SC", system-ui, sans-serif !important;
}

.tracking-widest, .tracking-\[0\.2em\], .tracking-\[0\.25em\] {
  letter-spacing: .08em !important;
}

.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: none !important;
}

.rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: 5px !important;
}

.border-cocoa-200, .border-cocoa-300, .border-cream-200,
.border-cream-300, .border-stone-200 {
  border-color: var(--om-line) !important;
}

.text-cocoa-950, .text-cocoa-900, .text-cocoa-800 {
  color: var(--om-ink) !important;
}

.text-cocoa-700, .text-cocoa-600, .text-stone-500 {
  color: var(--om-muted) !important;
}

.text-meadow-600, .text-meadow-700 { color: var(--om-green) !important; }
.text-amber-600, .text-amber-700 { color: var(--om-amber) !important; }

/* My Work is the decision entry, not a marketing landing page. */
body[data-route="my-work"] main {
  background: #fff !important;
}

body[data-route="my-work"] main h1 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  font-weight: 650 !important;
}

body[data-route="my-work"] main > div,
body[data-route="workflow"] main > div {
  max-width: 1440px;
}

body[data-route="my-work"] main a[href^="/"] {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body[data-route="my-work"] main a[href^="/"]:hover {
  background: #edf5fb !important;
  border-color: #9fbdd5 !important;
}

/* Keep the complete collaboration toolbox, but visually demote it. */
body[data-route="my-work"] aside {
  background: var(--om-soft) !important;
  border-left-color: var(--om-line) !important;
}

body[data-route="my-work"] aside button {
  background: white !important;
  border-color: transparent !important;
}

body[data-route="my-work"] aside button:hover {
  background: #edf4f8 !important;
}

/* Workflow: make the operational canvas primary and reduce ornamental treatment. */
body[data-route="workflow"] main section,
body[data-route="workflow"] main article {
  box-shadow: none !important;
}

body[data-route="workflow"] main button {
  border-radius: 4px !important;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(29,94,147,.28) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1100px) {
  header.glass-bar > div { gap: 6px !important; }
  header.glass-bar a, header.glass-bar button { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}