/*
 * JOY Automart · MAISON Design System
 * Canonical colour contract locked 2026-08-03.
 * Burgundy + gold remain the brand anchors in both modes. Only canvas,
 * surfaces, typography, borders and glow intensity invert between modes.
 */

:root,
html[data-theme="light"],
html[data-joy-mode="light"] {
  --maison-main-bg: #FBF7F2;
  --maison-elevated-bg: #FFFDF9;
  --maison-card: #FFFFFF;
  --maison-secondary-surface: #F6EFE8;
  --maison-burgundy: #A4123A;
  --maison-deep-burgundy: #7F0D2C;
  --maison-burgundy-hover: #8F102F;
  --maison-gold: #A87924;
  --maison-champagne: #C19A4B;
  --maison-text-primary: #211217;
  --maison-text-secondary: #65545A;
  --maison-text-muted: #7D6970;
  --maison-border: rgba(94,35,49,0.16);
  --maison-border-strong: rgba(94,35,49,0.28);
  --maison-burgundy-glow: rgba(164,18,58,0.10);
  --maison-gold-glow: rgba(168,121,36,0.10);
  --maison-success: #147A50;
  --maison-warning: #A15C00;
  --maison-error: #C4143F;
  --maison-obsidian: #070506;
  --maison-ivory: #FBF7F2;
  color-scheme: light;
}

html.dark,
html[data-theme="dark"],
html[data-joy-mode="dark"] {
  /* Dark surfaces sat almost on pure black (main bg was 7,5,6 of 255), which
     read as airless and collapsed the depth between base, elevated and card.
     Each surface is lifted proportionally — the R>B>G ratio that gives the
     dark theme its warm burgundy-tinted neutral is preserved exactly, and the
     step between the three tiers is widened slightly so elevation stays
     legible now that the base is no longer crushed.

     --maison-obsidian is deliberately NOT lifted: it is a named brand colour
     for surfaces that are meant to be true black, not a UI surface token. */
  --maison-main-bg: #0C090A;
  --maison-elevated-bg: #141013;
  --maison-card: #1A171A;
  --maison-secondary-surface: #221B1E;
  --maison-burgundy: #A4123A;
  --maison-deep-burgundy: #7F0D2C;
  --maison-burgundy-hover: #C71947;
  --maison-gold: #D0A84F;
  --maison-champagne: #E0C27A;
  --maison-text-primary: #FFF7F8;
  --maison-text-secondary: #CBB8BD;
  /* Muted text and borders rise with the surfaces so contrast ratios hold
     rather than drifting down as the background comes up. */
  --maison-text-muted: #B09AA0;
  --maison-border: rgba(255,235,239,0.15);
  --maison-border-strong: rgba(255,235,239,0.26);
  --maison-burgundy-glow: rgba(164,18,58,0.22);
  --maison-gold-glow: rgba(208,168,79,0.15);
  --maison-success: #34D399;
  --maison-warning: #FBBF24;
  --maison-error: #FB7185;
  --maison-obsidian: #070506;
  --maison-ivory: #FBF7F2;
  color-scheme: dark;
}

/* Canonical aliases for any new JOY Automart surface. */
:root {
  --joy-brand-burgundy: var(--maison-burgundy);
  --joy-brand-burgundy-deep: var(--maison-deep-burgundy);
  --joy-brand-gold: var(--maison-gold);
  --joy-brand-champagne: var(--maison-champagne);
  --joy-canvas: var(--maison-main-bg);
  --joy-surface-elevated: var(--maison-elevated-bg);
  --joy-surface: var(--maison-card);
  --joy-surface-secondary: var(--maison-secondary-surface);
  --joy-text-primary: var(--maison-text-primary);
  --joy-text-secondary: var(--maison-text-secondary);
  --joy-text-muted: var(--maison-text-muted);
  --joy-border: var(--maison-border);
  --joy-border-strong: var(--maison-border-strong);
  --joy-success: var(--maison-success);
  --joy-warning: var(--maison-warning);
  --joy-error: var(--maison-error);
}

/* HERMES Lead Room · MAISON contract ------------------------------------ */
html body .hlr-shell {
  --hlr-bg: var(--maison-main-bg) !important;
  --hlr-panel: var(--maison-elevated-bg) !important;
  --hlr-panel-solid: var(--maison-card) !important;
  --hlr-border: var(--maison-border) !important;
  --hlr-text: var(--maison-text-primary) !important;
  --hlr-muted: var(--maison-text-muted) !important;
  --hlr-faint: var(--maison-text-muted) !important;
  --active-persona: var(--maison-gold) !important;
  color: var(--maison-text-primary) !important;
  background:
    radial-gradient(900px 560px at 9% -8%, var(--maison-burgundy-glow), transparent 67%),
    radial-gradient(820px 540px at 95% 105%, var(--maison-gold-glow), transparent 68%),
    var(--maison-main-bg) !important;
}

html body .hlr-grid {
  opacity: .28 !important;
  background-image:
    linear-gradient(var(--maison-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--maison-border) 1px, transparent 1px) !important;
}

html body .hlr-header,
html body .hlr-persona-rail,
html body .hlr-live-panel,
html body .hlr-conversation__heading,
html body .hlr-command-zone {
  border-color: var(--maison-border) !important;
  background: color-mix(in srgb, var(--maison-elevated-bg) 94%, transparent) !important;
  color: var(--maison-text-primary) !important;
}

html body .hlr-conversation {
  background: color-mix(in srgb, var(--maison-main-bg) 88%, var(--maison-burgundy) 12%) !important;
}

html body .hlr-brand h1,
html body .hlr-live-panel__header strong,
html body .hlr-conversation__heading strong,
html body .hlr-context__header strong,
html body .hlr-history__panel header strong,
html body .hlr-record-card__title,
html body .hlr-action-card h3,
html body .hlr-forecast {
  color: var(--maison-gold) !important;
}

html body .hlr-brand span,
html body .hlr-live-panel__header span,
html body .hlr-conversation__heading span,
html body .hlr-context__header span,
html body .hlr-history__panel header span,
html body .hlr-message > header,
html body .hlr-live-panel__metrics span,
html body .hlr-live-panel section h2,
html body .hlr-context__stats span,
html body .hlr-context__body section h3,
html body .hlr-record-card__meta,
html body .hlr-shortcuts,
html body .hlr-shortcuts kbd {
  color: var(--maison-text-muted) !important;
}

html body .hlr-message > p,
html body .hlr-live-panel section p,
html body .hlr-context__body section p,
html body .hlr-record-card,
html body .hlr-record-card__metrics span,
html body .hlr-record-card__footer,
html body .hlr-action-card dd,
html body .hlr-persona__copy strong,
html body .hlr-rail-alerts span {
  color: var(--maison-text-secondary) !important;
}

html body .hlr-brand button,
html body .hlr-header__actions button,
html body .hlr-context__header button,
html body .hlr-history__panel header button,
html body .hlr-command button,
html body .hlr-suggestions button,
html body .hlr-live-panel__metrics div,
html body .hlr-context__stats div {
  border-color: var(--maison-border) !important;
  background: var(--maison-card) !important;
  color: var(--maison-text-secondary) !important;
  box-shadow: none !important;
}

html.dark body .hlr-brand button,
html.dark body .hlr-header__actions button,
html.dark body .hlr-context__header button,
html.dark body .hlr-history__panel header button,
html.dark body .hlr-command button,
html.dark body .hlr-suggestions button,
html.dark body .hlr-live-panel__metrics div,
html.dark body .hlr-context__stats div {
  background: var(--maison-secondary-surface) !important;
}

html body .hlr-brand button:hover,
html body .hlr-header__actions button:hover,
html body .hlr-context__header button:hover,
html body .hlr-history__panel header button:hover,
html body .hlr-command button:hover,
html body .hlr-suggestions button:hover {
  border-color: var(--maison-gold) !important;
  color: var(--maison-gold) !important;
  background: color-mix(in srgb, var(--maison-gold) 10%, var(--maison-card)) !important;
}

html body .hlr-persona {
  color: var(--maison-text-secondary) !important;
  border-color: transparent !important;
  background: transparent !important;
}

html body .hlr-persona:hover {
  background: color-mix(in srgb, var(--maison-burgundy) 7%, var(--maison-card)) !important;
}

html body .hlr-persona.is-active {
  border-color: color-mix(in srgb, var(--maison-burgundy) 42%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--maison-burgundy) 15%, var(--maison-card)), var(--maison-card)) !important;
  box-shadow: inset 3px 0 0 var(--maison-burgundy), 0 14px 36px -30px var(--maison-burgundy) !important;
}

html body .hlr-persona__icon {
  color: var(--maison-gold) !important;
  background: color-mix(in srgb, var(--maison-gold) 10%, transparent) !important;
}

html body .hlr-persona__status.is-online,
html body .hlr-header__telemetry i.is-live {
  background: var(--maison-success) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--maison-success) 54%, transparent) !important;
}

html body .hlr-header__telemetry i.is-offline,
html body .hlr-core--warning,
html body .hlr-offline-card > svg {
  color: var(--maison-error) !important;
}

html body .hlr-header__telemetry span {
  border-color: var(--maison-border) !important;
  color: var(--maison-text-secondary) !important;
  background: var(--maison-card) !important;
}

html.dark body .hlr-header__telemetry span {
  background: var(--maison-secondary-surface) !important;
}

html body .hlr-core__halo {
  border-color: color-mix(in srgb, var(--maison-gold) 58%, transparent) !important;
}

html body .hlr-core__halo--outer {
  box-shadow: 0 0 48px var(--maison-gold-glow), inset 0 0 28px color-mix(in srgb, var(--maison-gold) 4%, transparent) !important;
}

html body .hlr-core__halo--outer::before,
html body .hlr-core__halo--outer::after {
  background: var(--maison-gold) !important;
  box-shadow: 0 0 16px var(--maison-gold) !important;
}

html body .hlr-core__mesh,
html body .hlr-core__centre,
html body .hlr-core__state {
  border-color: color-mix(in srgb, var(--maison-gold) 42%, transparent) !important;
  background: var(--maison-card) !important;
  color: var(--maison-gold) !important;
  box-shadow: 0 0 34px var(--maison-gold-glow) !important;
}

html.dark body .hlr-core__mesh,
html.dark body .hlr-core__centre,
html.dark body .hlr-core__state {
  background: var(--maison-secondary-surface) !important;
}

html body .hlr-core__centre svg {
  color: var(--maison-gold) !important;
}

html body .hlr-message--assistant,
html body .hlr-message--owner,
html body .hlr-record-card,
html body .hlr-action-card,
html body .hlr-context__hero,
html body .hlr-history__panel,
html body .hlr-step-up__panel {
  border-color: var(--maison-border) !important;
  background: var(--maison-card) !important;
  color: var(--maison-text-primary) !important;
  box-shadow: 0 24px 70px -54px var(--maison-burgundy), inset 0 1px 0 color-mix(in srgb, var(--maison-champagne) 14%, transparent) !important;
}

html.dark body .hlr-message--assistant,
html.dark body .hlr-message--owner,
html.dark body .hlr-record-card,
html.dark body .hlr-action-card,
html.dark body .hlr-context__hero,
html.dark body .hlr-history__panel,
html.dark body .hlr-step-up__panel {
  background: var(--maison-card) !important;
}

html body .hlr-message--owner {
  border-color: color-mix(in srgb, var(--maison-burgundy) 34%, transparent) !important;
  background: color-mix(in srgb, var(--maison-burgundy) 7%, var(--maison-card)) !important;
}

html body .hlr-record-card:hover,
html body .hlr-message.is-streaming {
  border-color: var(--maison-gold) !important;
  background: color-mix(in srgb, var(--maison-gold) 6%, var(--maison-card)) !important;
}

html body .hlr-action-card {
  border-color: color-mix(in srgb, var(--maison-warning) 34%, transparent) !important;
}

html body .hlr-action-card__status,
html body .hlr-risk strong,
html body .hlr-risk svg,
html body .hlr-message__service-note,
html body .hlr-rail-alerts strong,
html body .hlr-rail-alerts svg {
  color: var(--maison-warning) !important;
}

html body .hlr-action-card__controls button {
  border-color: color-mix(in srgb, var(--maison-success) 34%, transparent) !important;
  color: var(--maison-success) !important;
  background: color-mix(in srgb, var(--maison-success) 8%, var(--maison-card)) !important;
}

html body .hlr-action-card__controls button.is-secondary {
  border-color: var(--maison-border) !important;
  color: var(--maison-text-secondary) !important;
  background: var(--maison-secondary-surface) !important;
}

html body .hlr-action-card__controls button.is-danger,
html body .hlr-offline-card button {
  border-color: color-mix(in srgb, var(--maison-error) 32%, transparent) !important;
  color: var(--maison-error) !important;
  background: color-mix(in srgb, var(--maison-error) 8%, var(--maison-card)) !important;
}

html body .hlr-command {
  border-color: var(--maison-border-strong) !important;
  background: var(--maison-card) !important;
  box-shadow: 0 24px 72px -52px var(--maison-burgundy), inset 0 1px 0 color-mix(in srgb, var(--maison-champagne) 15%, transparent) !important;
}

html.dark body .hlr-command {
  background: var(--maison-secondary-surface) !important;
}

html body .hlr-command textarea {
  color: var(--maison-text-primary) !important;
}

html body .hlr-command textarea::placeholder {
  color: var(--maison-text-muted) !important;
}

html body .hlr-command button.hlr-command__send {
  color: #FFF7F8 !important;
  border-color: var(--maison-burgundy) !important;
  background: linear-gradient(135deg, var(--maison-burgundy), var(--maison-deep-burgundy)) !important;
  box-shadow: 0 12px 30px -18px var(--maison-burgundy) !important;
}

html body .hlr-command button.hlr-command__send:hover {
  background: var(--maison-burgundy-hover) !important;
  color: #FFF7F8 !important;
}

html body .hlr-command.is-listening {
  border-color: var(--maison-error) !important;
  box-shadow: 0 0 34px color-mix(in srgb, var(--maison-error) 16%, transparent) !important;
}

html body .hlr-label--confirmed,
html body .hlr-grade--a,
html body .hlr-evidence strong,
html body .hlr-evidence svg {
  color: var(--maison-success) !important;
}

html body .hlr-label--confirmed,
html body .hlr-evidence {
  border-color: color-mix(in srgb, var(--maison-success) 24%, transparent) !important;
  background: color-mix(in srgb, var(--maison-success) 7%, var(--maison-card)) !important;
}

html body .hlr-grade--c {
  color: var(--maison-warning) !important;
}

html body .hlr-context {
  border-color: var(--maison-border-strong) !important;
  background: color-mix(in srgb, var(--maison-elevated-bg) 98%, transparent) !important;
  color: var(--maison-text-primary) !important;
  box-shadow: -40px 0 120px color-mix(in srgb, var(--maison-obsidian) 34%, transparent) !important;
}

html body .hlr-history {
  background: color-mix(in srgb, var(--maison-obsidian) 62%, transparent) !important;
}

html body .hlr-offline-card {
  border-color: color-mix(in srgb, var(--maison-error) 32%, transparent) !important;
  background: color-mix(in srgb, var(--maison-error) 7%, var(--maison-card)) !important;
  color: var(--maison-text-primary) !important;
}

html body .hlr-offline-card p {
  color: var(--maison-text-secondary) !important;
}

html body .hlr-step-up {
  background: color-mix(in srgb, var(--maison-obsidian) 76%, transparent) !important;
}

/* Mobile lead rail must stay on the MAISON surface instead of legacy blue-black. */
@media (max-width: 780px) {
  html body .hlr-persona-rail {
    background: color-mix(in srgb, var(--maison-elevated-bg) 98%, transparent) !important;
  }
  html body .hlr-persona.is-active {
    box-shadow: inset 0 -2px 0 var(--maison-burgundy) !important;
  }
}