/* Reason: authentication and the admin workspace share one font, palette and control geometry. */
@font-face { font-family: "Radius UI"; src: url('/admin/static/assets/font/STCForward-Regular.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Radius UI"; src: url('/admin/static/assets/font/STCForward-Medium.woff') format('woff'); font-style: normal; font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Radius UI"; src: url('/admin/static/assets/font/STCForward-Bold.woff') format('woff'); font-style: normal; font-weight: 700 900; font-display: swap; }

/* Reason: all native, legacy and body-portaled components consume the same palette and geometry in both modes. */
html[data-ui-theme="hotspoot"][data-ui-skin="mira"] {
  --rm-store-sidebar-width: 240px;
  --refresh-sidebar: #102d40; --refresh-sidebar-active: #1c465b;
  --ops-bg: #f4f7fa; --ops-surface: #fff; --ops-surface-soft: #f8fafc;
  --ops-text: #253748; --ops-text-strong: #142737; --ops-heading: #142737;
  /* Reason: slightly deepen small text on tinted surfaces to meet 4.5:1 contrast without changing filled primary actions. */
  --ops-muted: #607284; --ops-line: #dce5eb; --ops-line-soft: #e5ecf1;
  --ops-brand: #009f95; --ops-brand-dark: #00756f; --ops-brand-strong: #006d68; --ops-brand-soft: #e9f7f5;
  --ops-green: #187547; --ops-green-soft: #edf8f1;
  --ops-amber: #925410; --ops-amber-soft: #fff5e7;
  --ops-red: #b62e3c; --ops-red-soft: #fff0f1;
  --ops-blue: #245f9d; --ops-blue-soft: #eef5fd;
  --ops-radius: 10px; --ui-control-radius: 8px; --ui-badge-radius: 6px;
  --ui-control-height: 44px; --ui-space: 24px; --ui-font: "Radius UI", Arial, sans-serif;
  --ui-on-primary: #fff; --ui-primary: #007f79; --ui-primary-hover: #006d68;
  --ui-focus: rgb(0 127 121 / 18%); --ui-placeholder: #748595;
  --ops-shadow: 0 3px 12px rgb(16 45 64 / 3%);
  --ui-overlay-shadow: 0 12px 36px rgb(16 45 64 / 14%);
  --mira-sidebar-width: var(--rm-store-sidebar-width);
  --mira-bg: var(--ops-bg); --mira-surface: var(--ops-surface); --mira-surface-soft: var(--ops-surface-soft);
  --mira-text: var(--ops-text); --mira-muted: var(--ops-muted); --mira-border: var(--ops-line);
  --mira-primary: var(--ops-brand-dark); --mira-primary-hover: var(--ops-brand-strong);
  --rm-simple-radius: var(--ops-radius); --rm-simple-border: var(--ops-line); --rm-simple-muted: var(--ops-muted); --rm-simple-surface: var(--ops-surface);
  font-size: 14px; color-scheme: light;
}
html[data-ui-theme="hotspoot"][data-ui-skin="mira"][data-ui-color-mode="dark"] {
  --ops-bg: #0e1b26; --ops-surface: #172b39; --ops-surface-soft: #1d3342;
  --ops-text: #dce8ee; --ops-text-strong: #f1f7fa; --ops-heading: #f1f7fa;
  --ops-muted: #a6b9c6; --ops-line: #344b5b; --ops-line-soft: #2b4251;
  --ops-brand: #39c6b9; --ops-brand-dark: #70ded4; --ops-brand-strong: #48d2c5; --ops-brand-soft: #173f43;
  --ops-green: #82dcaf; --ops-green-soft: #173c32;
  --ops-amber: #f5c279; --ops-amber-soft: #403329;
  --ops-red: #ffa7b1; --ops-red-soft: #432c38;
  --ops-blue: #92c9ff; --ops-blue-soft: #223b52;
  --ui-primary: #39c6b9; --ui-primary-hover: #70ded4; --ui-on-primary: #102d40;
  --ui-focus: rgb(57 198 185 / 22%); --ui-placeholder: #9aafbd;
  --ops-shadow: 0 3px 12px rgb(0 0 0 / 8%); --ui-overlay-shadow: 0 12px 36px rgb(0 0 0 / 28%);
  color-scheme: dark;
}