/*
 * mc.css — the "Minecraft UI" redesign foundation.
 *
 * How a page opts in: add class="mc" to <body> and load this file AFTER css/style.css
 * (plus a <link> for the Cousine font — the font itself is NOT loaded here).
 * Everything except the :root tokens is scoped under body.mc, so style.css keeps doing
 * the functional work and this layer only reskins the shared components.
 *
 * Palette note (measured, not eyeballed): the mockup's --panel #727274 is an almost
 * perfect mid-grey — pure white on it is 4.80:1 and pure BLACK only 4.37:1, so no colour
 * whatsoever reaches 4.5:1 except near-white. The panel token is therefore darkened to
 * #4e4e50, which buys a real hierarchy: primary 8.30:1 > secondary 5.70:1 > muted 4.65:1.
 * Every derived surface (panel-2, rows, slots) is rescaled by the same proportion so the
 * mockup's depth order (frame > panel > card > row > slot) is preserved.
 */

:root {
  --bg-page: #2b2b2b;
  --frame-outer: #bdbdb9;
  /* Darkened from the mockup's #727274 — see the header note. Collides on purpose with
     style.css's --panel: the few legacy rules reading it (.panel, .modal__dialog,
     .admin-page-actions, .pwa-tip) are all reskinned below and expect the dark value. */
  --panel: #4e4e50;
  --panel-2: #3f3f41;
  --row-top: #3b3b3d;
  --row-bot: #2c2c2e;
  --slot-bg: #333335;
  --bar-olive: #454f34;
  --bar-olive-text: #b0c98c; /* was #a3c17d = 4.33:1 on olive; this is 4.78:1 */
  --edge-light: rgba(255, 255, 255, 0.35);
  --edge-dark: rgba(0, 0, 0, 0.5);
  --border-dark: #1e1e1f;
  --text-primary: #ffffff;   /* 8.30:1 on --panel */
  --text-secondary: #d6d6d2; /* 5.70:1 on --panel */
  --text-muted: #c2c2be;     /* was #a3a3a0 = 1.90:1; this is 4.65:1 on --panel */
  --accent-gold: #ffd35c;    /* 5.82:1 on --panel — fine even for small text */
  --accent-emerald: #5bd66b; /* 4.46:1 on --panel — large text / accents only */
  --accent-purple: #c084f0;  /* 3.08:1 — decorative only, never body text */
  --accent-red: #ff5a45;     /* 2.69:1 — decorative only; error TEXT uses .message--error pair */
  --text-sh: 1.5px 1.5px 0 rgba(0, 0, 0, 0.55);
  /* Base button face + label. Tokenised (not hardcoded in the rule) so the light theme
     can swap the whole face by redefining three tokens instead of re-declaring
     body.mc .btn — a re-declaration under :root[data-mc-theme="light"] would outrank
     every page-level .btn--variant and repaint their labels. */
  --btn-top: #6a6a6c;
  --btn-bot: #47474a;
  --btn-label: #ffffff;
  /* Form-field internals that were hardcoded before the light theme existed. */
  --slot-focus-bg: #3a3a3c;
  --slot-edge-light: rgba(255, 255, 255, 0.14);
  --focus-ring: rgba(91, 214, 107, 0.5);
  /* The select arrow is a data-URI, so its fill cannot follow currentColor —
     the whole image is a token instead (light theme swaps it for a dark one). */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='14' height='2' fill='%23d6d6d2'/%3E%3Crect x='2' y='2' width='10' height='2' fill='%23d6d6d2'/%3E%3Crect x='4' y='4' width='6' height='2' fill='%23d6d6d2'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23d6d6d2'/%3E%3C/svg%3E");
  --font-body: 'Cousine', 'Courier New', ui-monospace, SFMono-Regular, monospace;
  --font-display: 'Cousine', 'Courier New', ui-monospace, SFMono-Regular, monospace;
}

/* ── base ─────────────────────────────────────────────────────────────── */

body.mc {
  /* Flat page ground instead of style.css's sky gradient. */
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: var(--font-body);
  /* Legacy components resolve their fonts through these; Press Start 2P has no
     Hebrew or Cyrillic anyway, so everything converges on Cousine. */
  --font-ui: var(--font-body);
  --font-brand: var(--font-display);
}

body.mc a {
  color: var(--accent-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Link styled as a button is a button: three page agents patched this locally before it
   moved here. body.mc a outweighs .btn (0,1,1 vs 0,1,0), so every <a class="btn"> came
   out underlined and gold — on each converted page, forever, unless the base owns it. */
body.mc a.contact-link {
  color: inherit;
  text-decoration: none;
}

/* Was `color: inherit`, which resolved to the BODY text colour, not the button label:
   d6d6d2 on the green primary in dark (3.2:1), and near-invisible dark-on-green once
   the light theme turned the body text dark. The label token is the button's, in both
   themes. (0,2,2) — this outranks `body.mc .btn` (0,2,1), which is exactly why the
   coloured faces are restated for anchors below. */
body.mc a.btn {
  color: var(--btn-label);
  text-decoration: none;
}

body.mc a:hover,
body.mc a:focus-visible {
  color: #ffe08a;
}

/* Anchor-shaped variant buttons: a.btn above (0,2,2) beats the .btn--face rules
   (0,2,1), so each face's label is restated at anchor specificity. Hover states are
   already covered by the (0,3,1) .btn--face:hover rules further down. */
body.mc a.btn--primary,
body.mc a.btn--danger {
  color: #fff;
}

body.mc a.btn--gold {
  color: #2a2108;
}

body.mc a.btn--warn {
  color: #2b2100;
}

body.mc a.btn--quiet {
  color: #1f1f1f;
}

/* ── bevel utilities (same recipe as the mockups) ─────────────────────── */

body.mc .mc-raised {
  border: 2px solid var(--border-dark);
  box-shadow:
    inset 2px 2px 0 var(--edge-light),
    inset -2px -2px 0 var(--edge-dark);
}

body.mc .mc-pressed {
  border: 2px solid var(--border-dark);
  box-shadow:
    inset -2px -2px 0 var(--edge-light),
    inset 2px 2px 0 var(--edge-dark);
}

/* ── page frame ───────────────────────────────────────────────────────── */

/*
 * .panel plays the mockup's .frame + .frame-inner in one element: a light 3px outer
 * frame around the dark panel. Width is left to style.css on purpose — .panel--admin
 * is 980px and must stay that way; the 400px in the mockup was just the mockup.
 */
body.mc .panel {
  background: var(--panel);
  border: 3px solid var(--frame-outer);
  border-radius: 4px;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
}

/* ── language switch (lang-btn look from the mockups) ─────────────────── */

body.mc .lang-switch__btn {
  min-width: 2.4rem;
  padding: 0.5rem 0.4rem;
  background: var(--row-top);
  color: var(--text-secondary); /* 7.67:1 on --row-top */
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  font-family: var(--font-body);
  text-shadow: var(--text-sh);
  box-shadow:
    inset 2px 2px 0 var(--edge-light),
    inset -2px -2px 0 var(--edge-dark);
}

body.mc .lang-switch__btn--active {
  background: var(--accent-emerald);
  color: #183014; /* 7.66:1 on the emerald plate */
  text-shadow: none;
  box-shadow:
    inset -2px -2px 0 var(--edge-light),
    inset 2px 2px 0 var(--edge-dark);
}

/* ── typography on the panel ──────────────────────────────────────────── */

body.mc .brand {
  font-family: var(--font-display);
  color: var(--accent-gold);
  text-shadow: var(--text-sh);
}

body.mc .page-title,
body.mc .modal__title,
body.mc .section-title {
  color: var(--text-primary);
  text-shadow: var(--text-sh);
}

body.mc .eyebrow {
  color: var(--text-muted);
  text-shadow: var(--text-sh);
}

body.mc .lede,
body.mc .modal__text,
body.mc .login-register__note,
body.mc .footer-link {
  color: var(--text-secondary);
}

body.mc .section-title__hint,
body.mc .scan-hint,
body.mc .field-note,
body.mc .app-footer {
  color: var(--text-muted); /* 4.65:1 on --panel */
}

body.mc .app-footer {
  border-top-color: rgba(0, 0, 0, 0.35);
}

body.mc .app-footer__version.is-stale {
  color: var(--accent-gold);
}

body.mc .login-register {
  border-top-color: rgba(0, 0, 0, 0.35);
}

/* Identity bar: the mockup's olive strip with an emerald edge. The edge is a logical
   border, so RTL flips it without extra rules. */
body.mc .profile {
  background: var(--bar-olive);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-inline-start: 5px solid var(--accent-emerald);
  border-radius: 2px;
  box-shadow: none;
}

body.mc .profile-label {
  color: var(--bar-olive-text); /* 4.78:1 on olive */
  letter-spacing: 1px;
  text-shadow: var(--text-sh);
}

body.mc .profile-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent-gold);
  letter-spacing: 1px;
  text-shadow: var(--text-sh);
}

/* ── buttons ──────────────────────────────────────────────────────────── */

/*
 * Base = the mockup's btn-secondary. No padding/size here: .btn--small and .btn--sm
 * keep their own metrics from style.css/page css (body.mc .btn outranks them, so
 * setting padding here would blow small buttons up).
 * Gradient tops are chosen so WHITE LABELS measure >= 4.5:1 on the lightest pixel row.
 */
body.mc .btn {
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  color: var(--btn-label);
  font-family: var(--font-body);
  text-shadow: var(--text-sh);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bot) 100%); /* white 5.40:1 at top */
  box-shadow:
    inset 2px 2px 0 var(--edge-light),
    inset -2px -2px 0 var(--edge-dark),
    0 3px 0 rgba(0, 0, 0, 0.4);
}

body.mc .btn:hover,
body.mc .btn:focus-visible {
  filter: brightness(1.08);
  color: var(--btn-label);
}

body.mc .btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

body.mc .btn:active {
  transform: translateY(2px);
  filter: brightness(0.96);
  box-shadow:
    inset 2px 2px 0 var(--edge-light),
    inset -2px -2px 0 var(--edge-dark),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

body.mc .btn--primary {
  /* #6cc257 from the mockup gives white only 2.21:1 — darkened until it passes. */
  background: linear-gradient(180deg, #3b8232 0%, #2c6a24 100%); /* white 4.75:1 / 6.57:1 */
}

body.mc .btn--secondary {
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bot) 100%);
}

body.mc .btn--danger {
  background: linear-gradient(180deg, #a03a2e 0%, #6e241b 100%); /* white 6.69:1 at top */
}

/*
 * Primary/danger keep WHITE labels in both themes (measured on their own gradients,
 * which do not change). Stated explicitly — the base label is a token and goes dark
 * in the light theme; without these the green button would inherit a dark label.
 * The :hover pair is needed because .btn:hover (higher specificity) repaints the
 * label with the token too — same reason gold/warn/quiet restate theirs.
 */
body.mc .btn--primary,
body.mc .btn--danger,
body.mc .btn--primary:hover,
body.mc .btn--primary:focus-visible,
body.mc .btn--danger:hover,
body.mc .btn--danger:focus-visible {
  color: #fff;
}

body.mc .btn--gold {
  background: linear-gradient(180deg, #ffe08a 0%, #d4a017 100%);
  color: #2a2108; /* 6.70:1 on the dark end, 12.34:1 on the light end */
  text-shadow: none;
}

body.mc .btn--gold:hover,
body.mc .btn--gold:focus-visible {
  color: #2a2108;
}

body.mc .btn--warn {
  background: linear-gradient(180deg, #e8b53a 0%, #bd8c16 100%);
  color: #2b2100; /* 5.25:1 on the dark end */
  text-shadow: none;
}

/* The base .btn:hover repaints labels white; dark-labelled faces restate theirs. */
body.mc .btn--warn:hover,
body.mc .btn--warn:focus-visible {
  color: #2b2100;
}

/* Light quiet face must survive the darker base above (same specificity, later file). */
body.mc .btn--quiet {
  background: linear-gradient(180deg, #f0f0ee 0%, #cfcfcb 100%);
  color: #1f1f1f;
  text-shadow: none;
}

body.mc .btn--quiet:hover,
body.mc .btn--quiet:focus-visible {
  color: #1f1f1f;
}

/*
 * Disabled: project rule — a refused button must LOOK refused, so grayscale stays.
 * The bevel goes flat with it: the raised edge is what says "pressable".
 */
body.mc .btn:disabled {
  opacity: 0.55;
  filter: grayscale(1);
  transform: none;
  cursor: not-allowed;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.12),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25);
}

/* ── form fields (mc-pressed niche) ───────────────────────────────────── */

body.mc .field-label {
  color: var(--text-secondary);
  text-shadow: var(--text-sh);
}

body.mc .field input,
body.mc .field textarea,
body.mc .field select,
body.mc .mc-form select {
  background-color: var(--slot-bg);
  color: var(--text-primary); /* 12.6:1 on --slot-bg */
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  font-family: var(--font-body);
  box-shadow:
    inset 2px 2px 0 var(--edge-dark),
    inset -2px -2px 0 var(--slot-edge-light);
}

body.mc .field input::placeholder,
body.mc .field textarea::placeholder {
  color: var(--text-muted); /* 7.06:1 on --slot-bg */
  opacity: 1;
}

body.mc .field input:focus,
body.mc .field textarea:focus,
body.mc .field select:focus-visible,
body.mc .mc-form select:focus-visible {
  background-color: var(--slot-focus-bg);
  border-color: var(--border-dark);
  box-shadow:
    inset 2px 2px 0 var(--edge-dark),
    inset -2px -2px 0 var(--slot-edge-light),
    0 0 0 3px var(--focus-ring);
}

/* The select arrow from style.css is a dark #373737 triangle — invisible on the dark
   slot. Same pixel triangle, light. Positions restated because this rule outranks the
   RTL flip in style.css. */
body.mc .field select,
body.mc .mc-form select {
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

[dir="rtl"] body.mc .field select,
[dir="rtl"] body.mc .mc-form select {
  background-position: left 0.85rem center;
}

body.mc .field select:disabled,
body.mc .mc-form select:disabled {
  opacity: 0.55;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* ── messages ─────────────────────────────────────────────────────────── */

/*
 * Dark plates with light text (the accent colours themselves fail on the panel:
 * --accent-red is 2.69:1 there). All pairs measured >= 7:1.
 */
body.mc .message {
  background: var(--panel-2);
  color: var(--text-secondary); /* 7.21:1 */
  border: 2px solid var(--border-dark);
  border-radius: 2px;
}

body.mc .message--error {
  background: #552018;
  color: #ffc4ba; /* 8.63:1 */
  border-color: var(--accent-red);
}

body.mc .message--success,
body.mc .message--ok {
  background: #2e4423;
  color: #b9e8a6; /* 7.70:1 */
  border-color: var(--accent-emerald);
}

body.mc .message--notice {
  background: #4a3a12;
  color: #ffd97a; /* 8.11:1 */
  border-color: #d4a017;
}

/* ── modals ───────────────────────────────────────────────────────────── */

body.mc .modal__backdrop {
  background: rgba(0, 0, 0, 0.62);
}

/*
 * The dialog is a small framed panel. The shadow is written out IN FULL — inner bevel,
 * outer frame ring, drop — because any later box-shadow modifier replaces the whole
 * stack (known trap: a repainted edge once erased the shared dialog ring).
 */
body.mc .modal__dialog {
  background: var(--panel);
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  box-shadow:
    inset 2px 2px 0 var(--edge-light),
    inset -2px -2px 0 var(--edge-dark),
    0 0 0 3px var(--frame-outer),
    0 18px 40px -10px rgba(0, 0, 0, 0.75);
}

/* ── QR / scanner ─────────────────────────────────────────────────────── */

/* The code itself must stay black-on-white; only the frame joins the theme. */
body.mc .qr-frame {
  background: #fff;
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--frame-outer);
}

body.mc .qr-reader {
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  background: #1c1c1e;
  box-shadow:
    inset 2px 2px 0 var(--edge-dark),
    inset -2px -2px 0 rgba(255, 255, 255, 0.1);
}

/* ── fixed bottom bars ────────────────────────────────────────────────── */

body.mc .update-bar {
  background: linear-gradient(180deg, #e8b53a 0%, #bd8c16 100%);
  color: #2b2100; /* 5.25:1 on the dark end, 8.41:1 on the light */
  border-top: 3px solid var(--border-dark);
}

/* Restated: the reskinned body.mc .btn outranks style.css's .update-bar .btn. */
body.mc .update-bar .btn {
  background: #2b2100;
  color: #ffd97a; /* 11.71:1 */
  border-color: var(--border-dark);
  text-shadow: none;
}

body.mc .update-bar .btn:hover,
body.mc .update-bar .btn:focus-visible {
  background: #3d3000;
  color: #ffd97a;
}

body.mc .pwa-tip {
  background: var(--panel-2);
  border-top: 3px solid var(--border-dark);
  box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.35);
}

/* style.css paints this near-black for the old light bar — unreadable here. */
body.mc .pwa-tip__text {
  color: var(--text-primary);
}

/* ── [hidden] guards ──────────────────────────────────────────────────── */

/*
 * Author display beats the UA's [hidden] rule. style.css already carries a global
 * [hidden] { display: none !important; }, but every class this file gives a display
 * to gets an explicit guard anyway, per the project rule.
 */
body.mc .btn[hidden],
body.mc .lang-switch__btn[hidden],
body.mc .modal[hidden],
body.mc .update-bar[hidden],
body.mc .pwa-tip[hidden],
body.mc .qr-frame[hidden],
body.mc .message[hidden],
body.mc .profile[hidden] {
  display: none !important;
}

/* ── theme switch button (built by js/mc-theme.js) ────────────────────── */

/*
 * Lives inside .lang-switch and carries .lang-switch__btn, so the plate, bevel and
 * hover come from the rules above; this only sizes the inline pixel SVG. The icon
 * uses fill="currentColor", so it inherits the label colour pair already measured
 * for the language buttons in both themes.
 */
body.mc .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.mc .theme-btn svg {
  display: block;
  width: 12px;
  height: 12px;
}

body.mc .theme-btn[hidden] {
  display: none !important;
}

/* style.css reserves 4.5rem of eyebrow clearance — sized for TWO corner buttons.
   The theme switch makes three at mc's wider min-width (3 x 2.4rem + gaps + inset),
   and the landing eyebrow slid under the plates in LTR. Scoped to body.mc: legacy
   pages keep two buttons. Cards that zero the clearance because they sit below the
   switch (.point-arrival .eyebrow) outrank this at (0,3,1) and are unaffected. */
body.mc .eyebrow {
  padding-inline-end: 7.2rem;
}

/* ── light theme ──────────────────────────────────────────────────────── */

/*
 * Viewer-chosen light skin: js/mc-theme.js puts data-mc-theme="light" on <html>
 * (documentElement — set before first paint, the script loads in <head> without
 * defer). Dark stays the default; this block only re-points the tokens plus the
 * few component colours that were tuned for dark plates.
 *
 * Every pair below is measured (scratchpad contrast.js, WCAG): body text >= 4.5:1,
 * accents/large >= 3:1. Accents are NOT the dark theme's accents dimmed — gold as
 * text fails on light grey (#ffd35c is 1.6:1 on #c6c6c6), so the light accents are
 * dark amber / dark green / dark red / dark purple.
 */
:root[data-mc-theme="light"] {
  color-scheme: light;
  --bg-page: #9a9a98;
  /* Frame is DARKER than the panel here (inverse of dark theme): 3.23:1 vs page. */
  --frame-outer: #48484c;
  --panel: #c6c6c6;
  --panel-2: #b6b6b3;
  --row-top: #d2d2cf;
  --row-bot: #bfbfbc;
  --slot-bg: #e8e8e4;
  --bar-olive: #ccd6a3;
  --bar-olive-text: #3c4a1c; /* 6.27:1 on the light olive */
  --edge-light: rgba(255, 255, 255, 0.7);
  --edge-dark: rgba(0, 0, 0, 0.35);
  --border-dark: #3a3a3c;
  --text-primary: #1f1f1f;   /* 9.65:1 on --panel */
  --text-secondary: #3d3d3d; /* 6.36:1 on --panel */
  --text-muted: #454545;     /* 5.61:1 on --panel, 4.72:1 on --panel-2 */
  --accent-gold: #6f4800;    /* 4.72:1 on --panel — links stay real text */
  --accent-emerald: #1e6b2e; /* 3.84:1 on --panel; white on it is 6.57:1 */
  --accent-purple: #6d3d92;  /* 4.50:1 on --panel */
  --accent-red: #9c2314;     /* 4.61:1 on --panel */
  --text-sh: none;           /* pixel shadows read as dirt on light plates */
  --btn-top: #d9d9d6;
  --btn-bot: #bcbcb9;
  --btn-label: #1f1f1f;      /* 8.66:1 on the darkest pixel row */
  --slot-focus-bg: #f4f4f0;
  --slot-edge-light: rgba(255, 255, 255, 0.8);
  --focus-ring: rgba(30, 107, 46, 0.45);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='14' height='2' fill='%233d3d3d'/%3E%3Crect x='2' y='2' width='10' height='2' fill='%233d3d3d'/%3E%3Crect x='4' y='4' width='6' height='2' fill='%233d3d3d'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%233d3d3d'/%3E%3C/svg%3E");
}

/* Gold link hover was a lighter gold — on light grey it must go darker instead.
   :not(.btn) keeps this off anchor-shaped buttons: at (0,4,2) it would outrank even
   .btn--face:hover (0,3,1) and repaint hovered button labels amber. */
:root[data-mc-theme="light"] body.mc a:not(.btn):hover,
:root[data-mc-theme="light"] body.mc a:not(.btn):focus-visible {
  color: #5a3a00; /* 6.03:1 on --panel */
}

/* Same as the dark rule but a softer drop — a .6 black pool under a light panel
   on a light page reads as a hole. Single-entry stack, nothing else to restate. */
:root[data-mc-theme="light"] body.mc .panel {
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.35);
}

/* The active plate is now DARK green (token), so the hardcoded dark label flips. */
:root[data-mc-theme="light"] body.mc .lang-switch__btn--active {
  color: #ffffff; /* 6.57:1 on light-theme emerald */
}

/*
 * Message plates: light theme inverts them — pale plate, dark text (the dark
 * plates floated like holes on the light panel). Borders keep the accent tokens
 * where the rule already reads them; notice's border was hardcoded to a gold that
 * vanishes on the pale plate, so it is restated dark.
 */
:root[data-mc-theme="light"] body.mc .message--error {
  background: #eed6d2;
  color: #6e211a; /* 8.01:1 */
}

:root[data-mc-theme="light"] body.mc .message--success,
:root[data-mc-theme="light"] body.mc .message--ok {
  background: #ddead2;
  color: #23511b; /* 7.41:1 */
}

:root[data-mc-theme="light"] body.mc .message--notice {
  background: #f0e3bd;
  color: #5d4200; /* 7.32:1 */
  border-color: #8a5a00;
}