/**
 * MEO safety - OEM / ODM brand palette
 *
 * The six values below form the reviewed semantic OEM palette.
 * Keep these values deployment-owned: never populate them from a request.
 */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
}

:root {
  /* Actions and supporting visual language. */
  --brand-primary: #2f6b80;
  --brand-secondary: #5a8a62;

  /* Eye-comfort structure and alert language. */
  --brand-text: #2c3e50;
  --brand-background: #f9f8f6;
  --brand-alert: #d97706;
  --brand-alert-background: #fef3c7;
  --brand-font: 'Atkinson Hyperlegible', 'Inter', 'Open Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 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-secondary-dark: color-mix(in srgb, var(--brand-secondary) 72%, black);
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 12%, white);
  --brand-secondary-soft: color-mix(in srgb, var(--brand-secondary) 13%, white);
  --brand-alert-dark: color-mix(in srgb, var(--brand-alert) 72%, black);
  --brand-muted: color-mix(in srgb, var(--brand-text) 76%, var(--brand-background));
  --brand-line: color-mix(in srgb, var(--brand-text) 18%, var(--brand-background));

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

  --secondary: var(--brand-secondary) !important;
  --accent: var(--brand-secondary-dark) !important;
  --success: var(--brand-secondary-dark) !important;
  --coral: var(--brand-alert-dark) !important;
  --apricot: var(--brand-alert-background) !important;
  --orange: var(--brand-alert-dark) !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);
}

/* 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;
  --sky: color-mix(in srgb, var(--brand-primary) 7%, var(--brand-background)) !important;
}

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

/* Keep the master artwork immutable. Every standard light-surface reference
 * is rendered with the reviewed accessible colour variant instead. */
img[src$='meo-logo.svg'],
img[src*='meo-logo.svg?'] {
  content: url('/meo-logo-accessible.svg');
}

body {
  font-size: 18px;
  line-height: 1.6;
}

:root:not([data-theme='dark']) body {
  color: var(--brand-text);
  background-color: var(--brand-background);
}

/* 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: 17px; }
}

.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-secondary) !important;
}