/**
 * MEO Safety - backwards-compatible default palette.
 *
 * Named, immutable identities now live in brand-themes/*.css. This fallback
 * prevents an unpainted first frame before theme.js restores the saved choice.
 */
:root {
  --meo-brand-primary: #6e5367;
  --meo-brand-secondary: #c9a7a7;
}

/**
 * MEO Safety — immutable colour identity: Prune & Rose, V1.
 * This file is append-only: publish a new -vN file instead of editing it.
 */
:root[data-brand-theme='meo-prune-rose-v1'] {
  --meo-brand-primary: #6e5367;
  --meo-brand-secondary: #c9a7a7;
  --meo-brand-on-primary: #ffffff;
  --meo-brand-on-action: #ffffff;
  --meo-brand-on-secondary: #3e2e3a;
  --meo-brand-logo-url: url('/assets/brand/oem/meo-logo-oem-6e5367-c9a7a7.svg?v=1');
  --meo-brand-mascot-url: url('/assets/brand/oem/meo-mascot-o-oem-6e5367-c9a7a7.svg?v=1');
}

/**
 * MEO Safety — immutable colour identity: Turquoise & Navy, V1.
 * This file is append-only: publish a new -vN file instead of editing it.
 */
:root[data-brand-theme='meo-turquoise-navy-v1'] {
  --meo-brand-primary: #47bbd6;
  --meo-brand-secondary: #223452;
  --meo-brand-on-primary: #000000;
  --meo-brand-on-action: #000000;
  --meo-brand-on-secondary: #ffffff;
  --meo-brand-logo-url: url('/assets/brand/official/meo-logo.svg?v=1');
  --meo-brand-mascot-url: url('/assets/brand/oem/meo-mascot-o-oem-47bbd6-223452.svg?v=1');
}

/**
 * MEO Safety — immutable colour identity: Bleu pétrole & orange · V1.
 * Generated as meo-petroleum-orange-v1; create a new -vN file instead of editing it.
 */
:root[data-brand-theme='meo-petroleum-orange-v1'] {
  --meo-brand-primary: #3f7482;
  --meo-brand-secondary: #ec7a44;
  --meo-brand-on-primary: #ffffff;
  --meo-brand-on-action: #ffffff;
  --meo-brand-on-secondary: #000000;
  --meo-brand-logo-url: url('/assets/brand/oem/meo-logo-oem-3f7482-ec7a44.svg?v=1');
  --meo-brand-mascot-url: url('/assets/brand/oem/meo-mascot-o-oem-3f7482-ec7a44.svg?v=1');
}

/**
 * MEO Safety - canonical OEM/ODM theme.
 *
 * FR - Chaque identité versionnée fournit seulement deux couleurs et ses actifs.
 * Les variantes structurelles sont calculées ici sans réécrire cette feuille.
 * Les états de sécurité restent stables pour toutes les identités partenaires.
 * EN - Each versioned identity supplies only two colours and its assets.
 * Structural variants are calculated here without rewriting this stylesheet.
 * Safety states remain stable across every partner identity.
 */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Lexend-Vietnamese-Variable.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Lexend-LatinExt-Variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Lexend-Latin-Variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Named-theme inputs. Fallbacks prevent an unpainted frame while the saved
   * selection is restored from the closed local catalogue. */
  --brand-primary: var(--meo-brand-primary, #6e5367);
  --brand-secondary: var(--meo-brand-secondary, #c9a7a7);

  /* Calculated visual structure. Never replace these with copied hex values. */
  --brand-text: var(--meo-brand-reading, color-mix(in srgb, var(--brand-primary) 56%, black));
  --brand-background: color-mix(in srgb, var(--brand-secondary) 8%, white);
  --brand-surface: color-mix(in srgb, var(--brand-secondary) 2%, white);
  --brand-surface-tint: color-mix(in srgb, var(--brand-secondary) 7%, var(--brand-background));
  --brand-surface-strong: color-mix(in srgb, var(--brand-secondary) 15%, var(--brand-background));
  --brand-surface-emphasis: color-mix(in srgb, var(--brand-primary) 88%, black);
  --brand-surface-emphasis-strong: color-mix(in srgb, var(--brand-primary) 68%, black);
  --brand-surface-gradient: linear-gradient(145deg, var(--brand-surface), var(--brand-surface-tint));
  --brand-secondary-gradient: linear-gradient(145deg, var(--brand-secondary-soft), var(--brand-surface-strong));
  --brand-emphasis-gradient: linear-gradient(145deg, var(--brand-surface-emphasis), var(--brand-surface-emphasis-strong));
  --brand-alert: #d97706;
  --brand-alert-background: #fef3c7;
  --brand-positive: #2f7d52;
  --brand-positive-background: #e8f5ed;
  --brand-font: 'Lexend', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Greek', 'Inter', 'Open Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-logo-url: var(--meo-brand-logo-url, url('/assets/brand/oem/meo-logo-oem-6e5367-c9a7a7.svg?v=1'));
  --brand-mascot-url: var(--meo-brand-mascot-url, url('/assets/brand/oem/meo-mascot-o-oem-6e5367-c9a7a7.svg?v=1'));

  /* Derived automatically: partners never maintain copied RGB or dark values. */
  --brand-primary-rgb: from var(--brand-primary) r g b;
  --brand-secondary-rgb: from var(--brand-secondary) r g b;
  --brand-primary-dark: color-mix(in srgb, var(--brand-primary) 78%, black);
  --brand-primary-darker: color-mix(in srgb, var(--brand-primary) 62%, black);
  --brand-secondary-dark: color-mix(in srgb, var(--brand-secondary) 48%, black);
  --brand-secondary-hover: var(--meo-brand-secondary-hover, color-mix(in srgb, var(--brand-secondary) 82%, var(--brand-primary)));
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-background));
  --brand-secondary-soft: color-mix(in srgb, var(--brand-secondary) 18%, var(--brand-background));
  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 42%, var(--brand-background));
  --brand-secondary-border: color-mix(in srgb, var(--brand-secondary) 38%, var(--brand-background));
  --brand-alert-dark: color-mix(in srgb, var(--brand-alert) 72%, black);
  --brand-muted: var(--meo-brand-reading-muted, color-mix(in srgb, var(--brand-text) 68%, white));
  --brand-line: color-mix(in srgb, var(--brand-primary) 18%, var(--brand-background));
  /* Complete semantic roles: every shell can be recoloured from the same two
   * inputs without copying a palette hex into component CSS. */
  --brand-reading: var(--meo-brand-reading, var(--brand-text));
  --brand-reading-muted: var(--meo-brand-reading-muted, var(--brand-muted));
  --brand-link: var(--meo-brand-link, var(--brand-primary-dark));
  --brand-link-hover: var(--meo-brand-link-hover, var(--brand-primary-darker));
  --brand-rail-background: var(--meo-brand-rail-background, color-mix(in srgb, var(--brand-primary) 58%, black));
  --brand-footer-background: var(--meo-brand-footer-background, color-mix(in srgb, var(--brand-primary) 42%, black));
  --brand-on-dark: var(--meo-brand-on-dark, white);
  --brand-on-dark-muted: var(--meo-brand-on-dark-muted, white);
  --brand-on-dark-accent: var(--meo-brand-on-dark-accent, white);
  --brand-dark-line: color-mix(in srgb, var(--brand-secondary) 22%, transparent);
  --brand-navigation-hover: var(--meo-brand-navigation-hover, color-mix(in srgb, var(--brand-secondary) 10%, var(--brand-rail-background)));
  --brand-navigation-active: var(--meo-brand-navigation-active, color-mix(in srgb, var(--brand-secondary) 18%, var(--brand-rail-background)));
  --brand-icon-surface: var(--brand-primary-soft);
  /* Tile and inline-SVG roles are derived once for every current and future
   * OEM identity. Semantic success, warning and danger variants opt out. */
  --brand-tile-surface: var(--meo-brand-tile-surface, color-mix(in srgb, var(--brand-secondary) 7%, var(--brand-surface)));
  --brand-tile-surface-hover: var(--meo-brand-tile-surface-hover, color-mix(in srgb, var(--brand-secondary) 13%, var(--brand-surface)));
  --brand-tile-border: color-mix(in srgb, var(--brand-primary) 24%, var(--brand-background));
  --brand-tile-shadow: 0 10px 28px color-mix(in srgb, var(--brand-primary) 11%, transparent);
  /* Reading is derived darker than primary-dark for bright OEM primaries;
   * this keeps monochrome tile glyphs at WCAG AA without palette exceptions. */
  --brand-tile-icon: var(--meo-brand-tile-icon, var(--brand-reading));
  --brand-tile-icon-surface: var(--meo-brand-tile-icon-surface, color-mix(in srgb, var(--brand-primary) 13%, var(--brand-surface)));
  --brand-tile-icon-border: color-mix(in srgb, var(--brand-primary) 26%, var(--brand-surface));
  --brand-tile-icon-emphasis: var(--brand-primary);
  --brand-tile-icon-on-emphasis: var(--brand-on-primary);
  --brand-action: var(--brand-primary);
  --brand-action-hover: var(--meo-brand-action-hover, var(--brand-primary-dark));
  --brand-on-primary: var(--meo-brand-on-primary, #ffffff);
  --brand-on-action: var(--meo-brand-on-action, var(--brand-on-primary));
  --brand-on-action-hover: var(--meo-brand-on-action-hover, var(--brand-on-action));
  --brand-on-secondary: var(--meo-brand-on-secondary, var(--brand-text));
  --brand-on-secondary-hover: var(--meo-brand-on-secondary-hover, var(--brand-on-secondary));
  --brand-heading: var(--meo-brand-heading, var(--brand-primary-dark));
  --brand-focus: var(--meo-brand-focus, var(--brand-primary-dark));
  --brand-cyan-halo: color-mix(in srgb, var(--brand-secondary) 18%, transparent);
  --brand-cold-shadow: 0 14px 36px color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --brand-cold-shadow-soft: 0 6px 20px color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --brand-focus-ring: 0 0 0 4px color-mix(in srgb, var(--brand-focus) 34%, transparent);

  /* Stable aliases keep PHP, PWA, Admin and React surfaces aligned. */
  --brand: var(--brand-primary) !important;
  --brand-dark: var(--brand-text) !important;
  --primary: var(--brand-primary) !important;
  --primary-dark: var(--brand-primary-dark) !important;
  --teal: var(--brand-primary) !important;
  --earth-action: var(--brand-action) !important;
  --mint2: var(--brand-primary) !important;
  --admin-earth: var(--brand-action) !important;
  --blog-accent: var(--brand-primary) !important;
  --blog-accent-dark: var(--brand-primary-dark) !important;

  --secondary: var(--brand-secondary) !important;
  --accent: var(--brand-secondary) !important;
  --success: var(--brand-positive) !important;
  --success-soft: var(--brand-positive-background) !important;
  --coral: var(--brand-alert-dark) !important;
  --apricot: var(--brand-secondary-soft) !important;
  --orange: var(--brand-secondary) !important;
  --warning: var(--brand-alert-dark) !important;
  --warning-soft: var(--brand-alert-background) !important;
  --alert-text: var(--brand-text);
  --alert-marker: var(--brand-alert);
  --alert-background: var(--brand-alert-background);
}

/* Accessibility-role completion for identities published before the v2 OEM
 * generator. The historical theme files remain immutable; future identities
 * receive the same roles directly in their own versioned stylesheet. */
:root[data-brand-theme='meo-prune-rose-v1'] {
  --meo-brand-reading:#3e2e3a;--meo-brand-reading-muted:#746971;--meo-brand-heading:#564150;
  --meo-brand-link:#564150;--meo-brand-link-hover:#443340;--meo-brand-on-action-hover:#ffffff;
  --meo-brand-on-secondary-hover:#3e2e3a;--meo-brand-secondary-hover:#b9989b;--meo-brand-focus:#6e5367;
  --meo-brand-rail-background:#493744;--meo-brand-navigation-hover:#5c4853;--meo-brand-navigation-active:#6a545e;
  --meo-brand-footer-background:#2e232b;--meo-brand-on-dark:#ffffff;--meo-brand-on-dark-muted:#ede1e1;--meo-brand-on-dark-accent:#d8c0c0;
  --meo-brand-tile-surface:#faf7f7;--meo-brand-tile-surface-hover:#f7f2f2;--meo-brand-tile-icon:#564150;--meo-brand-tile-icon-surface:#ebe7ea;
}
:root[data-brand-theme='meo-turquoise-navy-v1'] {
  --meo-brand-reading:#111111;--meo-brand-reading-muted:#545454;--meo-brand-heading:#111111;
  --meo-brand-link:#2c7485;--meo-brand-link-hover:#111111;--meo-brand-on-action-hover:#000000;
  --meo-brand-on-secondary-hover:#ffffff;--meo-brand-secondary-hover:#294c6a;--meo-brand-focus:#3792a7;
  --meo-brand-rail-background:#2f7b8d;--meo-brand-navigation-hover:#2d7084;--meo-brand-navigation-active:#2c697e;
  --meo-brand-footer-background:#1e4f5a;--meo-brand-on-dark:#ffffff;--meo-brand-on-dark-muted:#ffffff;--meo-brand-on-dark-accent:#ffffff;
  --meo-brand-tile-surface:#ecedf0;--meo-brand-tile-surface-hover:#dfe1e6;--meo-brand-tile-icon:#2c7485;--meo-brand-tile-icon-surface:#e4f3f7;
}
:root[data-brand-theme='meo-petroleum-orange-v1'] {
  --meo-brand-reading:#234149;--meo-brand-reading-muted:#4b636a;--meo-brand-heading:#315a65;
  --meo-brand-link:#315a65;--meo-brand-link-hover:#274851;--meo-brand-on-action-hover:#ffffff;
  --meo-brand-on-secondary-hover:#000000;--meo-brand-secondary-hover:#cd794f;--meo-brand-focus:#3f7482;
  --meo-brand-rail-background:#2a4d56;--meo-brand-navigation-hover:#475453;--meo-brand-navigation-active:#5c5951;
  --meo-brand-footer-background:#1a3137;--meo-brand-on-dark:#ffffff;--meo-brand-on-dark-muted:#f9d2bf;--meo-brand-on-dark-accent:#ffffff;
  --meo-brand-tile-surface:#fef3ee;--meo-brand-tile-surface-hover:#fdebe3;--meo-brand-tile-icon:#315a65;--meo-brand-tile-icon-surface:#e6eaeb;
}

/* Structural colours apply only in light mode. Explicit night mode keeps its
 * reviewed dark palette and therefore never receives dark text on dark cards. */
:root:not([data-theme='dark']) {
  --text: var(--brand-text) !important;
  --ink: var(--brand-text) !important;
  --ink-2: var(--brand-muted) !important;
  --muted: var(--brand-muted) !important;
  --background: var(--brand-background) !important;
  --bg: var(--brand-background) !important;
  --paper: var(--brand-background) !important;
  --surface-soft: var(--brand-background) !important;
  --soft: var(--brand-background) !important;
  --line: var(--brand-line) !important;
  --border: var(--brand-line) !important;
  --surface: var(--brand-surface) !important;
  --panel: var(--brand-surface) !important;
  --white: var(--brand-surface) !important;
  --shadow: var(--brand-cold-shadow) !important;
  --shadow-soft: var(--brand-cold-shadow-soft) !important;
  --sky: color-mix(in srgb, var(--brand-primary) 7%, var(--brand-background)) !important;
  /* Legacy PHP, Prototype and Superadmin aliases. They are deliberately kept
   * here instead of recolouring each historical stylesheet by hand. */
  --forest: var(--brand-rail-background) !important;
  --navy: var(--brand-primary-darker) !important;
  --panel: var(--brand-surface) !important;
  --prototype-footer-bg: var(--brand-footer-background) !important;
  --admin-ink: var(--brand-reading) !important;
  --admin-muted: var(--brand-reading-muted) !important;
  --admin-paper: var(--brand-background) !important;
  --admin-panel: var(--brand-surface) !important;
  --admin-navy: var(--brand-primary-darker) !important;
  --admin-sky: var(--brand-primary-soft) !important;
  --admin-line: var(--brand-line) !important;
  --admin-panel-border: 1px solid var(--brand-line) !important;
  --legal-ink: var(--brand-reading) !important;
  --legal-copy: var(--brand-reading-muted) !important;
  --legal-accent: var(--brand-primary) !important;
  --legal-accent-dark: var(--brand-primary-dark) !important;
  --legal-line: var(--brand-line) !important;
  --legal-paper: var(--brand-background) !important;
  --legal-white: var(--brand-surface) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--brand-font) !important;
}

/* Route every standard light-surface reference through the reviewed coloured
 * SVG and version its URL so a palette update is visible immediately. */
img[src$='meo-logo.svg'],
img[src*='meo-logo.svg?'],
img[src$='MEO-logo.svg'],
img[src*='MEO-logo.svg?'],
img[src$='meo-logo-accessible.svg'],
img[src*='meo-logo-accessible.svg?'],
img[src*='/assets/brand/oem/meo-logo-oem-'] {
  content: var(--brand-logo-url);
}

/* Dark surfaces keep the same themed SVG source, then render it as a clean
 * white signature. The transparent lockup avoids the former white cartouche. */
.meo-lockup-on-dark {
  padding: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: transparent !important;
}

.meo-lockup-on-dark > img {
  filter: brightness(0) invert(1) !important;
}

/* Keep the historic mascot untouched. The active OEM theme redirects image
 * and CSS-background consumers to its immutable palette-specific variant. */
img[src$='MEO-mascot-o.svg'],
img[src*='MEO-mascot-o.svg?'],
img[src*='/assets/brand/oem/meo-mascot-o-oem-'] {
  content: var(--brand-mascot-url);
}

:where(.pet-face,.pet-big,.pin,.onboard-art,.mini-mascot) {
  background-image: var(--brand-mascot-url) !important;
}

body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.52;
}

:root:not([data-theme='dark']) body {
  color: var(--brand-text);
  background-color: var(--brand-background);
  background-image:
    radial-gradient(circle at 88% 4%, var(--brand-cyan-halo), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 5%, var(--brand-background)), var(--brand-background) 36rem);
  background-attachment: fixed;
}

/* Navy actions preserve strong white-text contrast on every viewport. */
:root:not([data-theme='dark']) :where(
  .public-cta,
  .public-newsletter button,
  .public-newsletter-dialog button[type='submit'],
  .public-cookie-save,
  .newsletter-flow-card button,
  .newsletter-flow-action,
  .price2 button,
  .price2-cta a,
  .price2-tracker a,
  .prototype-promo-dialog form button,
  .mk-live-offer > a,
  .mk-main-cta,
  .mk-tracker-presale > a,
  .auth-primary,
  .registration-card button[type='submit'],
  .contact-form button[type='submit'],
  .button.primary,
  .button[data-variant='primary'],
  .app-back-to-top,
  .back-top
) {
  color: var(--brand-on-action) !important;
  background: var(--brand-action) !important;
  border-color: var(--brand-action) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 22%, transparent) !important;
}

:root:not([data-theme='dark']) :where(
  .public-cta,
  .public-newsletter button,
  .price2 button,
  .price2-cta a,
  .mk-main-cta,
  .mk-tracker-presale > a,
  .auth-primary,
  .registration-card button[type='submit'],
  .contact-form button[type='submit'],
  .button.primary,
  .button[data-variant='primary']
):hover {
  color: var(--brand-on-action-hover) !important;
  background: var(--brand-action-hover) !important;
  border-color: var(--brand-action-hover) !important;
}

:root:not([data-theme='dark']) :where(.status-success,.toast-success,.is-success,[data-status='success']) {
  color: var(--brand-text) !important;
  border-color: var(--brand-primary) !important;
  background: var(--brand-positive-background) !important;
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--brand-focus) !important;
  outline-offset: 3px;
  box-shadow: var(--brand-focus-ring) !important;
}

/* Calm structure: subtly pink surfaces, prune borders and diffuse shadows. */
:root:not([data-theme='dark']) :where(
  .card,
  .auth-card,
  .registration-card,
  .settings-panel,
  .settings-hub-content,
  .metric-card,
  .plan,
  .blog-latest-card,
  .blog-article-shell,
  .legal-card,
  .public-newsletter-dialog,
  .modal-content,
  .drawer
):not(.dark) {
  border-color: var(--brand-line) !important;
  background-color: var(--brand-surface-tint) !important;
  box-shadow: var(--brand-cold-shadow-soft) !important;
}

/* Selected navigation and primary actions use the deep prune identity. */
:root:not([data-theme='dark']) :where(
  .segment.active,
  .settings-hub-nav button.active,
  .settings-hub-nav a.active,
  .public-menu-links a[aria-current='page'],
  .tabs [aria-selected='true'],
  .rail-button.active,
  .bottom-nav a.active,
  .mobile-bottom-nav a.active
) {
  color: var(--brand-on-primary) !important;
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

:root:not([data-theme='dark']) :where(
  .settings-hub-nav svg,
  .metric-card svg,
  .telemetry-gauge svg,
  .public-feature svg,
  .feature-icon,
  .card-icon
) {
  color: var(--brand-primary);
}

/* Important badges use the powdered-rose emotional accent. */
:root:not([data-theme='dark']) :where(.badge-accent,.tag-accent,.pill-accent,.is-important) {
  color: var(--brand-text) !important;
  border-color: var(--brand-secondary-border) !important;
  background: var(--brand-secondary-soft) !important;
}

/* Secondary actions stay visibly actionable without competing with the main
 * CTA. Dark prune text preserves AA contrast on powdered rose. */
:root:not([data-theme='dark']) :where(
  .button.secondary,
  .button[data-variant='secondary'],
  .auth-secondary,
  .public-signin,
  .secondary-action,
  .tracking-pause-toggle
) {
  color: var(--brand-on-secondary) !important;
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
}

:root:not([data-theme='dark']) :where(
  .button.secondary,
  .button[data-variant='secondary'],
  .auth-secondary,
  .public-signin,
  .secondary-action,
  .tracking-pause-toggle
):hover {
  color: var(--brand-on-secondary-hover) !important;
  background: var(--brand-secondary-hover) !important;
  border-color: var(--brand-primary-border) !important;
}

:root:not([data-theme='dark']) :where(h1,h2,h3,.page-title,.section-title) {
  color: var(--brand-heading);
}

:root:not([data-theme='dark']) :where(input,select,textarea) {
  color: var(--brand-text);
  border-color: var(--brand-line);
  background: var(--brand-surface);
}

/* Orange is a marker, never the low-contrast paragraph colour on butter. */
:root:not([data-theme='dark']) :where(.alert, .warning, .auth-alert, [role='alert']) {
  color: var(--alert-text) !important;
  border-color: var(--alert-marker) !important;
  background-color: var(--alert-background) !important;
}

@media (max-width: 480px) {
  body { font-size: 15px; }
}

/* Professional typography hierarchy
 *
 * Lexend has a generous visual footprint: moderate sizes and weights create
 * more authority than oversized, ultra-bold copy. The scale below keeps one
 * clear editorial focus while making controls and supporting information calm.
 */
:where(h1,h2,h3,h4,h5,h6){font-weight:520!important;text-wrap:balance}
:where(h1,h2){letter-spacing:-.035em!important}
:where(h3,h4,h5,h6){letter-spacing:-.018em!important}
:where(p,li,dd,dt,small){font-weight:400}
:where(strong,b){font-weight:550}
:where(button,[role='button'],.button,summary,label,nav a){font-weight:520!important}
:where(.eyebrow,.kicker,.mk-kicker,.step-label,.legal-kicker,.settings-nav-kicker){font-size:.6875rem!important;font-weight:550!important;letter-spacing:.09em!important}

/* Marketing and editorial headings: confident, never billboard-sized. */
:where(.mk-hero,.mk-page-hero,.mk-product-hero-copy,.coverage-hero,.pricing-intro,.ulule-page) h1{
  font-size:calc(clamp(2.25rem,3.8vw,3.55rem) - 0.1667rem)!important;
  font-weight:540!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
}
:where(.mk-section-head,.mk-how,.mk-benelux,.mk-privacy,.mk-final,.mk-editorial-head,.mk-tracker-copy) h2{
  font-size:calc(clamp(1.75rem,2.8vw,2.65rem) - 0.1667rem)!important;
  font-weight:530!important;
  line-height:1.08!important;
  letter-spacing:-.034em!important;
}
:where(.mk-feature,.mk-editorial-card,.mk-tracker-facts,.tracker-purchase,.plan,.coverage-scale) h3{
  font-size:calc(clamp(1.1rem,1.5vw,1.45rem) - 0.1667rem)!important;
  font-weight:520!important;
  line-height:1.22!important;
}
:where(.mk-hero-copy>p,.mk-page-hero>p,.mk-page-hero p,.mk-editorial-head p,.mk-product-hero-copy>p,.coverage-hero p){
  font-size:clamp(.925rem,1vw,1rem)!important;
  line-height:1.58!important;
}

/* Blog, legal and authentication pages use a quieter reading scale. */
:where(.blog-hero,.blog-article-shell,.legal-hero) h1{
  font-size:calc(clamp(1.9rem,3.2vw,2.9rem) - 0.1667rem)!important;
  font-weight:540!important;
  line-height:1.06!important;
  letter-spacing:-.036em!important;
}
:where(.article-lead,.blog-article-shell>article>header p,.legal-hero-inner>p){font-size:1rem!important;line-height:1.6!important}
:where(.article-body,.blog-content,.legal-section-body){font-size:.98rem!important;line-height:1.64!important}
.auth-story h1{font-size:calc(clamp(2.2rem,4vw,2.95rem) - 0.1667rem)!important;font-weight:540!important;line-height:1.07!important;letter-spacing:-.035em!important}
.auth-card h2{font-size:calc(1.35rem - 0.1667rem)!important;font-weight:530!important;line-height:1.2!important}
:where(.auth-story>p,.auth-card>p){font-size:.95rem!important;line-height:1.55!important}

/* Product UI, dashboard and administrative surfaces. */
:where(.page-head,.settings-page>.page-head,.pet-hub-page>.page-head) h1{
  font-size:calc(clamp(1.55rem,2vw,1.95rem) - 0.1667rem)!important;
  font-weight:540!important;
  line-height:1.1!important;
  letter-spacing:-.032em!important;
}
:where(.page-head,.settings-section-head,.section-title)>p{font-size:.92rem!important;line-height:1.5!important}
:where(.card,.settings-hub-content,.settings-panel,.drawer,.modal-body){font-weight:400}
:where(.card,.settings-hub-content,.settings-panel,.drawer,.modal-body) :where(h2,h3,h4,strong,b){font-weight:520!important}
:where(.button,.segment,.rail-button,.rail-action,.notification-button,.settings-hub-nav button,.auth-primary,.auth-secondary,.auth-provider,.auth-login-tab,.public-cta,.public-primary a,.public-signin,.menu-button,.public-menu-toggle,.public-quick-menu,.public-cookie-link,.public-newsletter button,.language-picker-trigger,.public-menu-links>a,.public-menu-actions>a,.public-preference-action,.public-preferences-dock button,.public-preferences-dock select){
  font-size:.84375rem!important;
  font-weight:520!important;
  letter-spacing:-.005em;
}
:where(.button,.notification-button,.settings-hub-nav button,.auth-primary,.auth-secondary,.auth-provider,.public-cta,.public-primary a,.public-signin,.menu-button,.public-menu-links>a,.public-menu-actions>a,.public-preference-action){
  min-height:2.625rem!important;
  padding:.55rem .875rem!important;
  border-radius:.75rem!important;
  line-height:1.2!important;
}
:where(.segment,.auth-login-tab){min-height:2.25rem!important;padding:.45rem .7rem!important;line-height:1.15!important}
.public-header :where(nav a,.public-signin,.public-menu-links>a,.public-menu-actions>a){font-size:.84375rem!important;font-weight:500!important}
.public-dialog h2{font-size:clamp(1.3rem,2vw,1.6rem)!important;font-weight:530!important;line-height:1.15!important}
:where(.status,.tag,.badge,.pill,.live-status,.notification-badge){font-weight:540!important}
:where(.telemetry-gauge,.metric-card,.window-metrics,.battery-reading,.subscription-price,.price-summary) strong{font-weight:580!important}
:where(.telemetry-gauge,.metric-card,.window-metrics,.overview-window-card,.overview-status-card,.battery-reading) :where(span,b,small){font-weight:500!important}

@media(max-width:560px){
  :where(.mk-hero,.mk-page-hero,.mk-product-hero-copy,.coverage-hero,.pricing-intro,.ulule-page) h1{font-size:calc(clamp(1.85rem,8.2vw,2.35rem) - 0.1667rem)!important}
  :where(.mk-section-head,.mk-how,.mk-benelux,.mk-privacy,.mk-final,.mk-editorial-head,.mk-tracker-copy) h2{font-size:calc(clamp(1.55rem,6.5vw,2rem) - 0.1667rem)!important}
  :where(.blog-hero,.blog-article-shell,.legal-hero) h1{font-size:calc(clamp(1.75rem,7.5vw,2.2rem) - 0.1667rem)!important}
  .auth-story h1{font-size:calc(clamp(1.95rem,8.2vw,2.35rem) - 0.1667rem)!important}
  .auth-card h2{font-size:calc(1.25rem - 0.1667rem)!important}
  :where(.page-head,.settings-page>.page-head,.pet-hub-page>.page-head) h1{font-size:calc(clamp(1.5rem,6.3vw,1.75rem) - 0.1667rem)!important}
  :where(.button,.notification-button,.settings-hub-nav button,.auth-primary,.auth-secondary,.auth-provider,.public-cta,.public-primary a,.public-signin,.menu-button,.public-menu-actions>a,.public-preference-action){min-height:2.75rem!important}
}

/* Product page: compact professional type scale for Lexend. */
body.mk-page-product{font-size:.9rem!important}
body.mk-page-product .mk-product-hero-copy h1{font-size:calc(clamp(2.1rem,3.7vw,3.15rem) - 0.1667rem)!important;font-weight:540!important;line-height:1.05!important;letter-spacing:-.038em!important}
body.mk-page-product :is(.mk-section-head,.mk-privacy,.mk-final,.mk-ufoundme) h2{font-size:calc(clamp(1.55rem,2.3vw,2.2rem) - 0.1667rem)!important;font-weight:530!important;line-height:1.12!important;letter-spacing:-.03em!important}
body.mk-page-product :is(.mk-feature,.mk-tracker-facts) h3{font-size:max(16px, calc(clamp(1rem,1.15vw,1.2rem) - 0.1667rem))!important;font-weight:520!important;line-height:1.25!important}
body.mk-page-product :is(.mk-product-pain,.mk-product-proof,.mk-privacy,.mk-final) :is(p,li,small,span){font-size:.9rem!important;line-height:1.58!important}
body.mk-page-product .mk-tracker-facts article strong{font-size:.94rem!important;font-weight:540!important;line-height:1.35!important}
body.mk-page-product .mk-tracker-presale>strong{font-size:clamp(1.1rem,1.4vw,1.35rem)!important;font-weight:560!important}
body.mk-page-product .mk-tracker-presale>:is(p,small){font-size:.875rem!important}
body.mk-page-product :is(.mk-main-cta,.mk-text-link,.mk-tracker-presale>a){font-size:.84375rem!important;font-weight:520!important}
@media(max-width:560px){body.mk-page-product .mk-product-hero-copy h1{font-size:calc(clamp(1.9rem,8vw,2.25rem) - 0.1667rem)!important}body.mk-page-product :is(.mk-section-head,.mk-privacy,.mk-final,.mk-ufoundme) h2{font-size:calc(clamp(1.45rem,6.4vw,1.85rem) - 0.1667rem)!important}body.mk-page-product .mk-product-hero-copy>p{font-size:.9375rem!important}}

.meo-powered-by {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: inherit;
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .82;
}

.meo-powered-by > span { white-space: nowrap; }

.meo-powered-by > img {
  display: block;
  width: auto;
  height: 1.25rem;
  max-width: 2.4rem;
  object-fit: contain;
}

.meo-footer-signature {
  width: min(calc(100% - 48px), 1360px);
  margin: 18px auto 0;
  padding-top: 18px;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgb(255 255 255 / .12);
  color: rgb(255 255 255 / .72);
}

.meo-footer-signature .meo-powered-by--footer {
  gap: .65rem;
  font-size: .6875rem;
  opacity: 1;
}

.meo-footer-signature .meo-powered-by--footer > img {
  width: auto;
  min-width: 72px;
  max-width: 96px;
  height: 2.15rem;
}

@media (max-width: 560px) {
  .meo-footer-signature {
    width: calc(100% - 32px);
    justify-content: flex-start;
  }
}

/* Text fallback retained for the authentication card. */
.meo-powered-by strong {
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.auth-card > .meo-powered-by {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, color-mix(in srgb, var(--brand-primary) 18%, white));
  color: var(--muted, inherit);
}

/* Secondary text remains AA-readable on light surfaces. */
:where(.eyebrow, .kicker, .step-label, .mk-kicker, .price2-hero > span, .price2-simulator header span) {
  color: var(--brand-secondary-dark) !important;
}

/* On dark surfaces the exact secondary colour has ample contrast. */
:where(.public-footer, .auth-footer, .app-rail, .admin-sidebar, [data-theme="dark"])
  :where(.eyebrow, .kicker, .step-label, .mk-kicker) {
  color: var(--brand-on-dark-accent) !important;
}

/* Full OEM shell coverage -------------------------------------------------
 * These selectors deliberately live at the end of the canonical theme: the
 * theme endpoint is loaded after legacy, prototype and React stylesheets. */
:root:not([data-theme='dark']) :where(body, main, .app-main, .admin-main, .superadmin-main) {
  color: var(--brand-reading);
}

:root:not([data-theme='dark']) :where(
  .lead,
  .page-head > p,
  .section-heading > p,
  .settings-section-head > p,
  .card > p,
  .settings-panel > p,
  .help-card > p,
  .legal-card > p
) {
  color: var(--brand-reading-muted);
}

:root:not([data-theme='dark']) :where(main, .app-main, .admin-main, .superadmin-main)
  a:not(.button):not([class*='primary']):not([aria-current='page']) {
  color: var(--brand-link);
}

:root:not([data-theme='dark']) :where(main, .app-main, .admin-main, .superadmin-main)
  a:not(.button):not([class*='primary']):not([aria-current='page']):hover {
  color: var(--brand-link-hover);
}

:root:not([data-theme='dark']) :where(.app-rail, .rail, .admin-sidebar, .sidebar, .side-nav) {
  color: var(--brand-on-dark) !important;
  background: var(--brand-rail-background) !important;
  border-color: var(--brand-dark-line) !important;
}

:root:not([data-theme='dark']) :where(.app-rail, .rail, .admin-sidebar, .sidebar, .side-nav)
  :where(a, button, .rail-button, .rail-action, .nav-item) {
  color: var(--brand-on-dark-muted) !important;
  border-color: transparent !important;
}

:root:not([data-theme='dark']) .admin-sidebar :where(.admin-nav-block, .admin-sidebar-identity) {
  color: var(--brand-on-dark-muted) !important;
  background: transparent !important;
  border-color: var(--brand-dark-line) !important;
}

:root:not([data-theme='dark']) :where(.mobile-menu-open .rail, .mobile-menu-open.rail-expanded .rail) {
  color: var(--brand-on-dark) !important;
  background: var(--brand-rail-background) !important;
}

:root:not([data-theme='dark']) :where(.app-rail, .rail, .admin-sidebar, .sidebar, .side-nav)
  :where(a, button, .rail-button, .rail-action, .nav-item):hover {
  color: var(--brand-on-dark) !important;
  background: var(--brand-navigation-hover) !important;
}

:root:not([data-theme='dark']) :where(
  .rail-nav a.active,
  .rail-nav a[aria-current='page'],
  .rail-button.active,
  .admin-sidebar a.active,
  .admin-sidebar a[aria-current='page'],
  .sidebar a.active,
  .side-nav a.active
) {
  color: var(--brand-on-dark) !important;
  background: var(--brand-navigation-active) !important;
  box-shadow: inset 3px 0 0 var(--brand-on-dark-accent) !important;
}

:root:not([data-theme='dark']) :where(.public-footer, .app-footer, .site-footer, .auth-footer, .admin-footer, .superadmin-footer) {
  color: var(--brand-on-dark) !important;
  background: var(--brand-footer-background) !important;
  border-color: var(--brand-dark-line) !important;
}

:root:not([data-theme='dark']) :where(.public-footer, .app-footer, .site-footer, .auth-footer, .admin-footer, .superadmin-footer)
  :where(p, span, small, address, dd, dt, li, label, .muted, .app-footer-legal) {
  color: var(--brand-on-dark-muted) !important;
}

:root:not([data-theme='dark']) :where(.public-footer, .app-footer, .site-footer, .auth-footer, .admin-footer, .superadmin-footer)
  :where(h2, h3, h4, strong, b) {
  color: var(--brand-on-dark) !important;
}

:root:not([data-theme='dark']) :where(.public-footer, .app-footer, .site-footer, .auth-footer, .admin-footer, .superadmin-footer)
  :where(a, button:not([type='submit'])) {
  color: var(--brand-on-dark-accent) !important;
}

:root:not([data-theme='dark']) :where(.public-footer, .app-footer, .site-footer, .auth-footer, .admin-footer, .superadmin-footer)
  :where(a, button:not([type='submit'])):hover {
  color: var(--brand-on-dark) !important;
}

:root:not([data-theme='dark']) :where(
  .public-footer-share,
  .public-footer-publisher,
  .meo-footer-signature,
  .app-footer-legal,
  .site-footer hr
) {
  border-color: var(--brand-dark-line) !important;
}

:root:not([data-theme='dark']) :where(.public-footer-share button, .public-footer-share a, .app-footer-social a) {
  color: var(--brand-on-dark) !important;
  border-color: var(--brand-dark-line) !important;
  background: var(--brand-navigation-hover) !important;
}

/* Complete surface recolouring -------------------------------------------
 * Component styles may keep their historical geometry, but their flat fills,
 * cards, type, actions and footers must consume the semantic OEM roles. The
 * selectors intentionally exclude semantic success/warning/danger states. */
:root:not([data-theme='dark']) :where(main, .app-main, .admin-main, .superadmin-main) :where(
  .card,
  [class$='-card'],
  [class*='-card '],
  [class$='-panel'],
  [class*='-panel '],
  [class$='-tile'],
  [class*='-tile '],
  [class$='-box'],
  [class*='-box ']
):not(.dark):not(.is-featured):not(.alert):not(.warning):not(.danger):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-tone='dark']):not([data-status]) {
  color: var(--brand-reading) !important;
  border-color: var(--brand-tile-border) !important;
  background-color: var(--brand-tile-surface) !important;
  box-shadow: var(--brand-tile-shadow) !important;
}

/* Every visible tile icon follows the active OEM identity. The supported icon
 * system uses inline SVG with currentColor, so geometry stays untouched while
 * stroke and intentional filled shapes inherit the semantic tile role. */
:root:not([data-theme='dark']) :where(
  .tile-icon,
  .card-icon,
  .settings-card-icon,
  .setting-tile > span:first-child,
  .settings-tile > span:first-child,
  .summary-icon,
  .metric-icon,
  .telemetry-icon,
  .billing-summary-icon,
  .contact-card-icon,
  .onboarding-feature-icon,
  .event-icon,
  .safe-icon,
  .checkout-product-icon
):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-status]) {
  color: var(--brand-tile-icon) !important;
  border-color: var(--brand-tile-icon-border) !important;
  background: var(--brand-tile-icon-surface) !important;
}

:root:not([data-theme='dark']) :where(
  .tile-icon,
  .card-icon,
  .settings-card-icon,
  .setting-tile > span:first-child,
  .settings-tile > span:first-child,
  .summary-icon,
  .metric-icon,
  .telemetry-icon,
  .billing-summary-icon,
  .contact-card-icon,
  .onboarding-feature-icon,
  .event-icon,
  .safe-icon,
  .checkout-product-icon
):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-status]) svg {
  color: inherit !important;
  stroke: currentColor;
}

:root:not([data-theme='dark']) :where(
  .tile-icon,
  .card-icon,
  .settings-card-icon,
  .setting-tile > span:first-child,
  .settings-tile > span:first-child,
  .summary-icon,
  .metric-icon,
  .telemetry-icon,
  .billing-summary-icon,
  .contact-card-icon,
  .onboarding-feature-icon,
  .event-icon,
  .safe-icon,
  .checkout-product-icon
) svg [fill='currentColor'] {
  fill: currentColor !important;
}

/* Legacy tiles that still reference a local SVG through <img> cannot inherit
 * currentColor across the document boundary. Their icon surface therefore
 * uses the derived dark brand role and the monochrome asset is rendered white. */
:root:not([data-theme='dark']) :where(
  .tile-icon,
  .card-icon,
  .settings-card-icon,
  .setting-tile > span:first-child,
  .settings-tile > span:first-child,
  .summary-icon,
  .metric-icon,
  .billing-summary-icon,
  .contact-card-icon,
  .onboarding-feature-icon,
  .event-icon,
  .safe-icon,
  .checkout-product-icon
):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-status]):has(> img[src$='.svg'], > img[src*='.svg?']) {
  color: var(--brand-on-dark) !important;
  background: var(--brand-surface-emphasis) !important;
}

:root:not([data-theme='dark']) :where(
  .tile-icon,
  .card-icon,
  .settings-card-icon,
  .setting-tile > span:first-child,
  .settings-tile > span:first-child,
  .summary-icon,
  .metric-icon,
  .billing-summary-icon,
  .contact-card-icon,
  .onboarding-feature-icon,
  .event-icon,
  .safe-icon,
  .checkout-product-icon
):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-status]) > img[src$='.svg'],
:root:not([data-theme='dark']) :where(
  .tile-icon,
  .card-icon,
  .settings-card-icon,
  .setting-tile > span:first-child,
  .settings-tile > span:first-child,
  .summary-icon,
  .metric-icon,
  .billing-summary-icon,
  .contact-card-icon,
  .onboarding-feature-icon,
  .event-icon,
  .safe-icon,
  .checkout-product-icon
):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-status]) > img[src*='.svg?'] {
  filter: brightness(0) invert(1) !important;
}

:root:not([data-theme='dark']) :where(
  .tile-icon.is-emphasis,
  .card-icon.is-emphasis,
  .settings-card-icon.is-emphasis,
  .summary-icon.is-emphasis,
  .billing-summary-icon.is-emphasis,
  .contact-card-icon.is-emphasis
) {
  color: var(--brand-tile-icon-on-emphasis) !important;
  background: var(--brand-tile-icon-emphasis) !important;
}

@media (hover: hover) {
  :root:not([data-theme='dark']) :where(
    [class$='-tile'],
    [class*='-tile ']
  ):not(.alert):not(.warning):not(.danger):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-status]):hover {
    background-color: var(--brand-tile-surface-hover) !important;
  }
}

:root:not([data-theme='dark']) :where(main, .app-main, .admin-main, .superadmin-main) :where(
  .card,
  [class$='-card'],
  [class*='-card '],
  [class$='-panel'],
  [class*='-panel '],
  [class$='-tile'],
  [class*='-tile ']
):not(.dark):not(.is-featured):not(.alert):not(.warning):not(.danger):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-tone='dark']):not([data-status])
  :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--brand-heading) !important;
}

:root:not([data-theme='dark']) :where(main, .app-main, .admin-main, .superadmin-main) :where(
  .card,
  [class$='-card'],
  [class*='-card '],
  [class$='-panel'],
  [class*='-panel '],
  [class$='-tile'],
  [class*='-tile ']
):not(.dark):not(.is-featured):not(.alert):not(.warning):not(.danger):not(.is-success):not(.is-available):not(.is-warning):not(.is-critical):not(.is-unavailable):not([data-tone='dark']):not([data-status])
  :where(p, li, dd, dt, small, .muted) {
  color: var(--brand-reading-muted) !important;
}

/* Marketing colour cards are explicit because their legacy backgrounds are
 * gradients and therefore cannot be replaced by background-color alone. */
:root:not([data-theme='dark']) :where(
  .mk-feature.light,
  .mk-product-hero,
  .mk-product-pain,
  .mk-product-proof,
  .mk-privacy,
  .price-option-card,
  .subscription-price-card,
  .tracker-price-card,
  .tracker-offer-price
) {
  color: var(--brand-reading) !important;
  border-color: var(--brand-line) !important;
  background: var(--brand-surface-gradient) !important;
}

:root:not([data-theme='dark']) :where(
  .mk-feature.earth,
  .mk-final,
  .final-cta,
  .price2-simulator,
  .price2-comparison,
  .plan.recommended,
  .plan-card.is-highlighted,
  .subscription-plan-card.is-highlighted
) {
  color: var(--brand-reading) !important;
  border-color: var(--brand-secondary-border) !important;
  background: var(--brand-secondary-gradient) !important;
}

:root:not([data-theme='dark']) :where(
  .mk-feature.dark,
  .mk-editorial,
  .mk-ufoundme,
  .shop-card.is-featured,
  .admin-card,
  [data-tone='dark']
) {
  color: var(--brand-on-dark) !important;
  border-color: var(--brand-dark-line) !important;
  background: var(--brand-emphasis-gradient) !important;
}

:root:not([data-theme='dark']) :where(
  .mk-feature.dark,
  .mk-editorial,
  .mk-ufoundme,
  .shop-card.is-featured,
  .admin-card,
  [data-tone='dark']
) :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--brand-on-dark) !important;
}

:root:not([data-theme='dark']) :where(
  .mk-feature.dark,
  .mk-editorial,
  .mk-ufoundme,
  .shop-card.is-featured,
  .admin-card,
  [data-tone='dark']
) :where(p, li, dd, dt, small, .muted) {
  color: var(--brand-on-dark-muted) !important;
}

/* Shared secondary controls and the floating preference card also follow the
 * palette. Destructive actions keep their dedicated danger semantics. */
:root:not([data-theme='dark']) :where(
  .menu-button,
  .public-preference-action,
  .public-preferences-dock select,
  .public-preferences-dock .global-market,
  .public-preferences-dock .global-language,
  .button.secondary,
  .button[data-variant='secondary']
) {
  color: var(--brand-reading) !important;
  border-color: var(--brand-secondary-border) !important;
  background: var(--brand-secondary-soft) !important;
}

:root:not([data-theme='dark']) :where(.public-preferences-dock, .global-preferences) {
  color: var(--brand-reading) !important;
  border-color: var(--brand-line) !important;
  background: color-mix(in srgb, var(--brand-surface) 94%, transparent) !important;
  box-shadow: var(--brand-cold-shadow-soft) !important;
}

:root:not([data-theme='dark']) :where(
  .button:not(.secondary):not([data-variant='secondary']):not(.danger):not([data-variant='danger']),
  .tracker-buy-button,
  .plan-cta,
  .checkout-button,
  .skip-link
) {
  color: var(--brand-on-action) !important;
  border-color: var(--brand-action) !important;
  background: var(--brand-action) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 22%, transparent) !important;
}

/* Final interaction fence: legacy component sheets may still declare white
 * hover text. These selectors execute after them and bind every common action
 * family to its independently calculated normal and hover foreground. */
:root:not([data-theme='dark']) :where(
  .button:not(.secondary):not(.button-secondary):not([data-variant='secondary']):not(.danger):not([data-variant='danger']),
  .auth-button:not(.secondary), .public-pwa-install, .calculator-submit,
  .family-primary, .family-invite button, .tracker-buy-button, .plan-cta,
  .checkout-button, .skip-link
):hover {
  color: var(--brand-on-action-hover) !important;
  border-color: var(--brand-action-hover) !important;
  background: var(--brand-action-hover) !important;
}

:root:not([data-theme='dark']) :where(
  .button-secondary, .auth-button.secondary, .family-secondary
) {
  color: var(--brand-reading) !important;
  border-color: var(--brand-secondary-border) !important;
  background: var(--brand-secondary-soft) !important;
}

:root:not([data-theme='dark']) :where(
  .button-secondary, .auth-button.secondary, .family-secondary
):hover {
  color: var(--brand-on-secondary-hover) !important;
  border-color: var(--brand-primary-border) !important;
  background: var(--brand-secondary-hover) !important;
}

:root:not([data-theme='dark']) :where(
  .auth-login-tab.is-active,
  .public-primary a.active,
  .public-primary a[aria-current='page'],
  .calculator-plan-options input:checked + span
) {
  color: var(--brand-on-primary) !important;
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary) !important;
}

/* Every footer shell, including the prototype and public launch variants,
 * receives the same derived background and on-dark typography. */
:root:not([data-theme='dark']) :where(
  .prototype-footer,
  .public-footer,
  .app-footer,
  .site-footer,
  .auth-footer,
  .admin-footer,
  .superadmin-footer,
  .newsletter-flow-footer
) {
  color: var(--brand-on-dark) !important;
  border-color: var(--brand-dark-line) !important;
  background: var(--brand-footer-background) !important;
}

/* Versioned identity selector. It is a single two-choice control so colour
 * identity remains distinct from the adjacent day/night and readability tools. */
.brand-theme-picker {
  min-width: 10rem;
  display: grid;
  gap: .2rem;
  color: var(--brand-reading);
}

.brand-theme-picker > span {
  color: var(--brand-reading-muted);
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-theme-picker select {
  width: 100%;
  min-height: 2.65rem;
  padding: 0 2rem 0 .75rem;
  border: 1px solid var(--brand-line);
  border-radius: .75rem;
  color: var(--brand-reading);
  background: var(--brand-surface-tint);
  font: inherit;
  font-size: .75rem;
  font-weight: 550;
}

.brand-theme-picker--compact {
  align-self: center;
}

@media (max-width: 560px) {
  .brand-theme-picker--compact {
    width: 100%;
    min-width: 0;
  }
}