/* Copia de marketing/brand/mercury33-tokens.css @ 98efdce. No editar acá. */
/* Mercury33 · tokens de marca (design-system-mercury33 0.1.0).
   Fuente única: DESIGN.md de este skill. Mismos valores; si cambia uno, cambian los dos.
   Montserrat es OFL (Google Fonts) y es la única tipografía (Juan, 01/11/2026 00:52 ART). */

:root {
  --m33-night: #0e0d1a;
  --m33-yellow: #ffe98a;
  --m33-white: #fafafa;

  /* Modo oscuro (por defecto) */
  --m33-bg: #0e0d1a;
  --m33-bg-2: #111111;
  --m33-surface: #211f23;
  --m33-line: #514b39;
  --m33-text: #fafafa;
  --m33-text-dim: #aeaeb2;
  --m33-accent: #ffe98a;
  --m33-button-border: rgba(250, 250, 250, 0.35);

  --m33-font: "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --m33-fs-display: 45px;
  --m33-fs-h2: 36px;
  --m33-fs-body: 18px;
  --m33-fs-label: 15px;
  --m33-fs-caption: 14px;

  --m33-radius-button: 6px;
  --m33-radius-card: 24px;
  --m33-target: 44px;
  --m33-container: 672px;
  --m33-pad-x: 40px;
  --m33-gap: 28px;
  --m33-social-safe: 135px;
}

/* Escala mobile: 32 / 24 / 16px, igual que el sitio (Juan, 03/11/2026 22:25 ART). */
@media (max-width: 736px) {
  :root {
    --m33-fs-display: 32px;
    --m33-fs-h2: 24px;
    --m33-fs-body: 16px;
    --m33-pad-x: 32px;
    --m33-gap: 24px;
  }
}

@media (max-width: 360px) {
  :root { --m33-pad-x: 24px; }
}

/* Modo claro: el acento pasa a noche; el amarillo nunca va como texto sobre blanco (1,16:1). */
.m33-light {
  --m33-bg: #fafafa;
  --m33-surface: #ffffff;
  --m33-surface-2: #eeeeef;
  --m33-line: #d4d4d6;
  --m33-text: #0e0d1a;
  --m33-text-dim: #5e5e66;
  --m33-accent: #0e0d1a;
  --m33-button-border: rgba(14, 13, 26, 0.35);
}

/* Wordmark de texto, sólo de respaldo si no entra el logo oficial del kit: <span class="m33-wordmark">MERCURY<b>33</b></span> */
.m33-wordmark { font-family: var(--m33-font); font-weight: 800; letter-spacing: 0.02em; color: var(--m33-text); }
.m33-wordmark b { font-weight: 800; color: var(--m33-yellow); }
.m33-light .m33-wordmark b { color: var(--m33-night); }

:focus-visible { outline: 2px solid var(--m33-yellow); outline-offset: 2px; }
.m33-light :focus-visible { outline-color: var(--m33-night); }