/* RedHaze · approved red-mist identity · 20261020-mist1.
 * Decorative surfaces only. Application states, controls and layouts retain
 * their existing contracts. All artwork is served locally.
 */
:root {
  --rh-red: #a61b32;
  --rh-red-hover: #861328;
  --rh-red-soft: #f8ecef;
  --rh-mist: url("/static/img/brand/art/red-mist.webp?v=20261020-mist1");
}
body[data-rh-system] :is(.brand-logo img, .nav-brand > img, .rh-app-icon, .drive-brand img) {
  object-fit: contain;
  box-shadow: 0 2px 7px #5c0b2022;
}
body[data-rh-system] :is(.app-header, .apple-nav, .drive-topbar, .topbar) {
  box-shadow: 0 1px 0 #6c19300a;
}
body[data-rh-system] .app-header { border-top: 3px solid var(--rh-red); }
body[data-rh-system] :is(.panel, .metric, .overview-card, .system-card, .live-row) {
  border-color: #e8e3e7;
}

/* The group portal carries the full brand atmosphere. */
body[data-rh-page="portal-home"] .apple-hero {
  background: #3b0815;
  color: #fff;
}
body[data-rh-page="portal-home"] .apple-hero::before {
  inset: 0;
  background: var(--rh-mist) right center / cover no-repeat;
}
body[data-rh-page="portal-home"] .apple-hero::after {
  background: linear-gradient(90deg, #300610d9, #3e0812a6 46%, #3e081200 88%);
}
body[data-rh-page="portal-home"] .apple-hero h1 { color: #fff9f6; }
body[data-rh-page="portal-home"] .apple-hero .grad { color: #ffb5ae; }
body[data-rh-page="portal-home"] .apple-hero .eyebrow { color: #e8b8c1; }
body[data-rh-page="portal-home"] .apple-hero .lead { color: #e0c7cd; }
body[data-rh-page="portal-home"] .apple-hero .btn-pill.primary {
  background: #fff5f1;
  color: #8b1730;
  border-color: #fff5f1;
}
body[data-rh-page="portal-home"] .apple-hero .btn-pill.outline {
  background: #ffffff08;
  color: #fff0ed;
  border-color: #ffffff55;
}
body[data-rh-page="portal-home"] .live-row { background: #fff; }
body[data-rh-page="portal-home"] .live-row:hover { border-color: #ce8c9c; }

/* Shared identity and content entrances. */
body[data-rh-page="portal-index"] .hero {
  background: linear-gradient(90deg, #380a17eb, #480a1b99 65%, #480a1b00), var(--rh-mist) right center / cover;
  color: #fff;
}
body[data-rh-page="portal-index"] .hero :is(h1, p) { color: #fff2ee; }
body[data-rh-page="portal-index"] .hero h1 .accent { color: #ffb5bd; }
body[data-rh-page="portal-index"] .hero .tag {
  background: #ffffff14;
  color: #f7dbdf;
  border-color: #ffffff3b;
}
body[data-rh-page="cms-home"] .container > .rh-feature-panel,
body[data-rh-page="chat-home"] .container > .rh-feature-panel {
  background: linear-gradient(90deg, #fff 0%, #fff 48%, #ffffffee 64%, #ffffff00), var(--rh-mist) right center / cover;
}
body[data-rh-system="cms"] .rh-feature-panel > :is(h1, p),
body[data-rh-system="chat"] .rh-feature-panel > :is(h1, p) { max-width: 80%; }

/* A quiet, warm sidebar and mist-tinted workbench headings. */
body[data-rh-system="erp"] { --sidebar: #29141f; }
body[data-rh-system="erp"] .sidebar {
  background: linear-gradient(165deg, #381424, #231720 55%);
  border-color: #482738;
}
body[data-rh-system="erp"] .nav-item.active { background: var(--rh-red); }
body[data-rh-system="erp"] .nav-item:hover { background: #4d2839; }
body[data-rh-system="erp"] .nav-item.active:hover { background: var(--rh-red-hover); }
body[data-rh-page="erp-app"] .page-heading,
body[data-rh-page="drive-app"] .page-heading {
  background: linear-gradient(90deg, #fff 0%, #fff 47%, #ffffffed 66%, #ffffff1a), var(--rh-mist) right center / cover;
  border-color: #e7d9df;
}
body[data-rh-system="erp"] .login-story {
  background: linear-gradient(160deg, #3d0b22c9, #3d0b2211), var(--rh-mist) 65% center / cover;
  color: #fff4f0;
}
body[data-rh-system="erp"] .login-story :is(.brand, .login-copy h1) { color: #fff6f2; }
body[data-rh-system="erp"] .login-story :is(.brand-product, .login-copy p, footer) { color: #e1bbc6; }
body[data-rh-system="erp"] .login-copy .eyebrow { color: #f5b6c0; }
body[data-rh-system="erp"] .login-route { color: #efd8dc; }
body[data-rh-system="erp"] .login-route span {
  background: #3c0c2177;
  border-color: #df91a54d;
}
body[data-rh-system="drive"] .login-layout { gap: 48px; }
body[data-rh-system="drive"].drive-login .login-story {
  padding: 36px;
  border-radius: 16px;
  background: linear-gradient(150deg, #3d0a21d9, #3d0a2133), var(--rh-mist) 65% center / cover;
  color: #f7e3e6;
}
body[data-rh-system="drive"] .login-story h1 { color: #fff6f2; }
body[data-rh-system="drive"] .login-story > p { color: #e5bdc8; }
body[data-rh-system="drive"] .login-story .kicker { color: #f5b6c0; }
body[data-rh-system="drive"] .cloud-art {
  height: 190px;
  box-shadow: 0 12px 32px #25051433;
}
body[data-rh-system="drive"] .login-features { color: #efd4dc; }
body[data-rh-system="drive"] .login-features span::before { background: transparent; color: #f4b9c9; }

/* Public service hubs share the same atmosphere around their own content. */
body[data-rh-system="desk"] .desk-hero,
body[data-rh-system="ads"] .ads-hero,
body[data-rh-page="coldchain-hub"] .hero {
  background: linear-gradient(90deg, #390a1be0, #390a1b99 60%, #390a1b22), var(--rh-mist) right center / cover;
  border-color: #6e2036;
  color: #fff6f2;
}
body[data-rh-system="desk"] .desk-hero :is(h1, p),
body[data-rh-page="coldchain-hub"] .hero :is(h1, .hero-copy) { color: #f8e5e7; }
body[data-rh-page="coldchain-hub"] .hero .eyebrow { color: #f1b0be; }
body[data-rh-system="desk"] .desk-hero .btn-pill.outline,
body[data-rh-page="coldchain-hub"] .hero .button.secondary {
  color: #fff0ed;
  background: #ffffff0d;
  border-color: #ffffff55;
}
body[data-rh-system="ads"] .ads-hero::after {
  background-image: url("/static/img/brand/group.svg?v=20261020-mist1");
  width: 144px;
  height: 144px;
  border-radius: 30px;
  box-shadow: 0 20px 50px #26030c44;
}
body[data-rh-system="ads"] .ads-hero p { color: #eed3dc; }
body[data-rh-system="mall"] .mall-hero-copy {
  background: linear-gradient(90deg, #34091bd9, #34091ba6), var(--rh-mist) center / cover;
}
body[data-rh-system="coldchain"] .login-story {
  background: linear-gradient(90deg, #38091bc9, #38091b66), var(--rh-mist) center / cover;
}

/* Visual confirmation page, including the approved logo at native icon sizes. */
.approved-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 28px 42px;
  margin: 0 0 24px;
  border-radius: 16px;
  color: #fff3ee;
  background: linear-gradient(90deg, #39091b88, #39091b11), var(--rh-mist) center / cover;
}
.approved-brand .eyebrow { color: #f2bbc5; }
.approved-brand h2 { font-size: 30px; margin: 0 0 12px; font-weight: 600; }
.approved-brand p { color: #eac4ce; font-size: 12px; }
.approved-r { border-radius: 32px; flex: 0 0 auto; box-shadow: 0 14px 40px #1d040e33; }
.master-sizes { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.master-sizes img { flex: 0 0 auto; border-radius: 4px; }
.master-sizes span { font-size: 10px; color: #e5b9c6; }

@media (max-width: 760px) {
  body[data-rh-page="portal-home"] .apple-hero h1 { font-size: 32px; text-wrap: balance; }
  body[data-rh-page="portal-home"] .apple-hero::before { inset: 0; background-position: 64% center; }
  body[data-rh-page="portal-home"] .apple-hero::after { background: #340919ab; }
  body[data-rh-page="portal-index"] .hero { background-position: 65% center; }
  body[data-rh-page="erp-app"] .page-heading,
  body[data-rh-page="drive-app"] .page-heading {
    background: linear-gradient(90deg, #fff 0%, #fffffff0 70%, #ffffffd6), var(--rh-mist) right center / cover;
  }
  body[data-rh-page="cms-home"] .container > .rh-feature-panel,
  body[data-rh-page="chat-home"] .container > .rh-feature-panel { background: #fff; border-top: 3px solid var(--rh-red); }
  body[data-rh-system="cms"] .rh-feature-panel > :is(h1, p),
  body[data-rh-system="chat"] .rh-feature-panel > :is(h1, p) { max-width: none; }
  body[data-rh-system="erp"] .login-story { background-size: cover; }
  body[data-rh-system="drive"].drive-login .login-story { padding: 26px; }
  body[data-rh-system="drive"] .login-layout { gap: 24px; }
  body[data-rh-system="ads"] .ads-hero::after { width: 72px; height: 72px; border-radius: 16px; }
  .approved-brand { padding: 26px; gap: 18px; align-items: flex-start; }
  .approved-brand h2 { font-size: 24px; }
  .approved-r { width: 120px; height: 120px; border-radius: 20px; }
  .master-sizes { flex-wrap: wrap; gap: 10px; }
  .master-sizes span { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .approved-brand { flex-direction: column-reverse; }
  .approved-r { width: 112px; height: 112px; }
  .approved-brand h2 { font-size: 22px; }
}