:root {
  --jmos-context-primary: #12100d;
  --jmos-context-primary-dark: #050403;
  --jmos-context-accent: #c99a2e;
  --jmos-context-accent-dark: #9b6d1d;
  --jmos-context-accent-soft: #f6eddb;
  --jmos-context-background: #f8f5ef;
  --jmos-context-surface: #ffffff;
  --jmos-context-surface-soft: #f2eadc;
  --jmos-context-text: #1d1812;
  --jmos-context-muted: #66594c;
  --jmos-context-border: rgba(45, 35, 22, .18);
  --jmos-context-heading-font: Georgia, "Times New Roman", serif;
  --jmos-context-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jmos-context-radius: 6px;
  --jmos-context-shadow: 0 16px 36px rgba(18, 16, 13, .14);
}

:root[data-jmos-surface-theme="jolie-maison"] {
  --jmos-context-primary: #283477;
  --jmos-context-primary-dark: #2a327a;
  --jmos-context-accent: #edd947;
  --jmos-context-accent-dark: #d5be20;
  --jmos-context-accent-soft: #f0f1f6;
  --jmos-context-background: #f0f1f6;
  --jmos-context-surface: #ffffff;
  --jmos-context-surface-soft: #f0f1f6;
  --jmos-context-text: #545861;
  --jmos-context-muted: #6c7078;
  --jmos-context-border: #eaebef;
  --jmos-context-heading-font: "Asap Condensed", "Arial Narrow", Arial, sans-serif;
  --jmos-context-font: Montserrat, Arial, sans-serif;
  --jmos-context-radius: 0;
  --jmos-context-shadow: 0 14px 34px rgba(40, 52, 119, .12);
}

body.jmos-context-surface {
  --bg: var(--jmos-context-background);
  --surface: var(--jmos-context-surface);
  --surface-soft: var(--jmos-context-surface-soft);
  --text: var(--jmos-context-text);
  --ink: var(--jmos-context-text);
  --muted: var(--jmos-context-muted);
  --border: var(--jmos-context-border);
  --line: var(--jmos-context-border);
  --paper: var(--jmos-context-surface);
  --soft: var(--jmos-context-surface-soft);
  --accent: var(--jmos-context-primary);
  --accent-dark: var(--jmos-context-primary-dark);
  --brand: var(--jmos-context-primary);
  --brand-dark: var(--jmos-context-primary-dark);
  --panel-bg: var(--jmos-context-surface);
  --field-border: var(--jmos-context-border);
  --shadow: var(--jmos-context-shadow);
  color: var(--jmos-context-text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--jmos-context-accent) 16%, transparent), transparent 34%),
    var(--jmos-context-background);
  font-family: var(--jmos-context-font);
}

body.jmos-context-surface h1,
body.jmos-context-surface h2,
body.jmos-context-surface h3,
body.jmos-context-surface h4,
body.jmos-context-surface .brand {
  font-family: var(--jmos-context-heading-font);
}

body.jmos-context-surface a {
  color: var(--jmos-context-primary-dark);
}

body.jmos-context-surface .eyebrow,
body.jmos-context-surface .label,
body.jmos-context-surface .section-kicker {
  color: var(--jmos-context-accent-dark);
}

body.jmos-context-surface button,
body.jmos-context-surface .button {
  border-color: var(--jmos-context-primary);
  border-radius: var(--jmos-context-radius);
  color: #fff;
  background: var(--jmos-context-primary);
}

body.jmos-context-surface button:hover,
body.jmos-context-surface button:focus-visible,
body.jmos-context-surface button:active,
body.jmos-context-surface .button:hover,
body.jmos-context-surface .button:focus-visible,
body.jmos-context-surface .button:active {
  border-color: var(--jmos-context-accent);
  background: var(--jmos-context-primary-dark);
}

body.jmos-context-surface button.secondary,
body.jmos-context-surface .button.secondary {
  border-color: var(--jmos-context-border);
  color: var(--jmos-context-primary-dark);
  background: var(--jmos-context-surface);
}

body.jmos-context-surface button.secondary:hover,
body.jmos-context-surface button.secondary:focus-visible,
body.jmos-context-surface button.secondary:active,
body.jmos-context-surface .button.secondary:hover,
body.jmos-context-surface .button.secondary:focus-visible,
body.jmos-context-surface .button.secondary:active {
  border-color: var(--jmos-context-accent);
  background: var(--jmos-context-accent-soft);
}

body.jmos-context-surface :focus-visible {
  outline-color: color-mix(in srgb, var(--jmos-context-accent) 72%, #fff);
}

body.jmos-context-surface .context,
body.jmos-context-surface > header {
  color: #fff;
  background:
    linear-gradient(135deg, var(--jmos-context-primary), var(--jmos-context-primary-dark));
}

body.jmos-context-surface .context {
  border-radius: calc(var(--jmos-context-radius) + 10px);
  box-shadow: var(--jmos-context-shadow);
}

body.jmos-context-surface .context .eyebrow,
body.jmos-context-surface > header .eyebrow {
  color: var(--jmos-context-accent);
  opacity: 1;
}

body.jmos-context-surface .context p,
body.jmos-context-surface > header p {
  color: color-mix(in srgb, #fff 82%, var(--jmos-context-accent));
}

body.jmos-context-surface .context .button {
  border-color: var(--jmos-context-accent);
  color: var(--jmos-context-primary);
  background: var(--jmos-context-accent);
}

body.jmos-context-surface .context .button:hover,
body.jmos-context-surface .context .button:focus-visible,
body.jmos-context-surface .context .button:active {
  border-color: var(--jmos-context-accent);
  color: var(--jmos-context-accent);
  background: var(--jmos-context-primary-dark);
}

body.jmos-context-surface .context .button:disabled {
  border-color: var(--jmos-context-border);
  color: color-mix(in srgb, var(--jmos-context-primary) 48%, #fff);
  background: color-mix(in srgb, var(--jmos-context-accent) 50%, var(--jmos-context-surface));
  cursor: not-allowed;
  opacity: .72;
}

body.jmos-context-surface .metric,
body.jmos-context-surface .card,
body.jmos-context-surface .panel,
body.jmos-context-surface .notice,
body.jmos-context-surface .empty,
body.jmos-context-surface .event-card,
body.jmos-context-surface .inquiry-card,
body.jmos-context-surface .list-item,
body.jmos-context-surface .links a,
body.jmos-context-surface input,
body.jmos-context-surface select,
body.jmos-context-surface textarea {
  border-color: var(--jmos-context-border);
  border-radius: var(--jmos-context-radius);
  color: var(--jmos-context-text);
  background: var(--jmos-context-surface);
}

body.jmos-context-surface .metric,
body.jmos-context-surface .card,
body.jmos-context-surface .panel {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--jmos-context-primary) 7%, transparent);
}

body.jmos-context-surface .event-card,
body.jmos-context-surface .inquiry-card {
  border-left-color: var(--jmos-context-accent);
}

body.jmos-context-surface .status {
  color: var(--jmos-context-primary-dark);
  background: var(--jmos-context-accent-soft);
}

body.jmos-context-surface .status:before {
  background: var(--jmos-context-accent-dark);
}

body.jmos-context-surface .standards {
  background: var(--jmos-context-surface-soft);
}

body.jmos-context-surface .dialog {
  background: color-mix(in srgb, var(--jmos-context-primary) 68%, transparent);
}

body.jmos-context-surface > .jmos-global-nav {
  border-bottom-color: var(--jmos-context-border);
  color: var(--jmos-context-text);
  background: var(--jmos-context-surface);
}

body.jmos-context-surface > .jmos-global-nav a,
body.jmos-context-surface > .jmos-global-nav button {
  border-color: var(--jmos-context-border);
  color: var(--jmos-context-text);
  background: var(--jmos-context-surface);
}

body.jmos-context-surface > .jmos-global-nav a:hover,
body.jmos-context-surface > .jmos-global-nav button:hover {
  border-color: var(--jmos-context-accent);
}

body.jmos-context-surface > .jmos-global-nav .jmos-global-nav__primary {
  border-color: var(--jmos-context-primary) !important;
  color: #fff !important;
  background: var(--jmos-context-primary) !important;
}

body.jmos-context-surface > .jmos-global-nav .jmos-global-nav__context small,
body.jmos-context-surface > .jmos-global-nav .jmos-global-nav__user small {
  color: var(--jmos-context-muted);
}

@media (max-width: 520px) {
  body.jmos-context-surface .context {
    border-radius: calc(var(--jmos-context-radius) + 6px);
  }
}