/**
 * Almotamaiz brand tokens (Phase 2A).
 *
 * This file ONLY introduces CSS custom properties (design tokens) for the
 * new "Safe Move System" identity, plus a very small number of low-risk,
 * global, non-layout-affecting rules (currently just ::selection).
 *
 * It deliberately does NOT repaint existing components yet (buttons, header,
 * footer, cards, etc. still use their original hardcoded colors). That
 * migration is scoped for a later phase, once tokens are reviewed/approved
 * and each component can be updated deliberately with visual QA.
 */

:root {
  --alm-navy: #102033;
  --alm-navy-2: #183552;
  --alm-gold: #C99A3A;
  --alm-sand: #F6F1E8;
  --alm-white: #FFFFFF;
  --alm-slate: #5D6673;
  --alm-light: #EEF1F4;
  --alm-green: #2F7D5C;
  --alm-whatsapp: #25D366;

  --alm-radius-sm: 12px;
  --alm-radius-md: 18px;
  --alm-radius-lg: 24px;

  --alm-shadow-soft: 0 10px 30px rgba(16, 32, 51, 0.08);
  --alm-shadow-strong: 0 18px 50px rgba(16, 32, 51, 0.14);
}

/* Safe, global, non-breaking: text selection color using the new palette. */
::selection {
  background-color: var(--alm-gold);
  color: var(--alm-navy);
}

/*
 * Real logo sizing (Phase 2B). Height-only constraint + object-fit:contain
 * guarantees the image can never stretch/distort regardless of its native
 * aspect ratio — width is always derived automatically.
 */
.alm-brand__logoimg {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.alm-brand__text.alm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .alm-brand__logoimg { height: 34px; }
}

/*
 * Footer logo: the real logo's wordmark is navy-on-transparent, which has
 * poor contrast on the footer's dark navy background. A small sand backing
 * chip keeps the real logo (with its actual navy/gold colors) legible
 * without needing a separate light-color logo variant yet.
 */
.alm-footer__logoimg {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  background: var(--alm-sand);
  padding: 6px 10px;
  border-radius: var(--alm-radius-sm);
}